それで、質問は、私が理解しているように、「 a の値に基づいてフォームフィールドを表示および非表示にするにはどうすればよい<select>ですか?」ということです。
始める前に、これはだまされています。そこでの回答の質に非常に満足していないので、慣習に逆らって自分の回答を投稿します。
まず最初に、ここでの他のすべての回答は完全に正しい軌道に乗っていますが、現在、彼らが何をしているのかを説明できていません。
他の例と同様に、この例ではjQueryを使用します。jQuery は、一連の反復的で冗長なタスクを大幅に軽減する素晴らしい Javascript ライブラリです。jQuery は$、ページへのアクセスと変更を可能にする -- はい、単なるドル記号 -- という関数を公開します。
ステップ1
既存のコードに似た最小限の例を作成しましょう。
<form>
<select name="select1" id="select1">
<option value="1">account 001</option>
<option value="2">account 002</option>
<option value="3">blue 001</option>
</select>
<input type="text" name="text1" id="text1">
</form>
注意すべき重要事項:
- 最新の HTML では、属性値 (
value="1") を引用符で囲む必要があります。
- jQuery でターゲットにする必要があるすべての要素は、簡単に識別できる必要があります。
idここではsを使用しています。
ステップ2
イベントリスナーをアタッチしましょう。イベントは、ページを操作しているときに発生するものです。<select>この例では、イベントの をリッスンしますchange。
<script type="text/javascript">
$(function() {
$('#select1').on('change', function(event) {
alert(this.value);
});
});
</script>
それは、あまりスペースのない専門用語です。少し説明させてください。
$()jQueryへの関数呼び出しです。$(function(){ ... })関数を jQuery オブジェクトに渡しています。これは、「jQuery、ページの読み込みが完了したら、この関数を実行してください」というショートカットです。$('#select1')id「select1」で「d」された要素を見つけるようjQueryに依頼します$('#select1').on('change', function ...)changeイベントを監視し、要求された関数を実行するよう jQuery に要求します。- 最後に、関数自体の内部で、要素
alertの現在の値を含むダイアログをスローします。select
これは jsfiddleのデモです。
ステップ 3
これで、選択メニューが変更されるたびに Javascript が実行されるようになりました。そのテキストボックスを表示したり隠したりしましょう！
まず、非表示にする必要があります。Javascript を使用して表示および非表示にしているため、Javascript が実行できる場合にのみ非表示にするように指示する必要があります。Javascript を実行できない人から何かを隠すと、彼らは不機嫌になります。したがって、onload ハンドラに新しい行を追加します。
$(function() {
$('#text1').hide();
$('#select1'). // ...
});
その新しい行が「jQuery に text1 要素を非表示にするよう依頼する」であると推測した場合は、正しく推測できます。
では、「青」オプションをどのように監視すればよいでしょうか。そのjsfiddleに戻って、それで遊んでください。valueのoptionが警告を受けていることに気付きましたか? それらはまったく青くありません！値だけでなく、実際に選択されoptionたものに到達する必要があります。それは少し面白いです。
に関する MDN のドキュメントを<select>見てみましょう。それ自体をHTMLSelectElementとして公開することを示しています。大きな驚きではありません。これには、選択されselectedIndexたものを示す というプロパティがあり、オプション自体に直接アクセスできるoptionというプロパティがあります。options甘い！
onload をもう一度更新しましょう。
<script type="text/javascript">
$(function() {
$('#text1').hide();
$('#select1').on('change', function(event) {
var opt = this.options[ this.selectedIndex ];
alert('You picked ' + $(opt).text());
});
});
</script>
繰り返しますが、jsfiddle のデモです。
options配列があります。Javascript は、PHP と同様に、角かっこを使用して配列要素にアクセスします。
したがって、オプションを選択し、それを jQuery でラップしてからtextメソッドを呼び出して、フォーム値ではなく要素内のテキスト ノードを取得します。
これでstringができました。何ができるでしょうか？
ステップ 4
PHP と同様に、Javascript には、パターン マッチングを行う方法である正規表現があります。ねえ、私たちは一致するパターンを持っています!
<script type="text/javascript">
$(function() {
$('#text1').hide();
$('#select1').on('change', function(event) {
var opt = this.options[ this.selectedIndex ];
var picked_blue = $(opt).text().match(/blue/i);
if(picked_blue) {
alert('You picked a blue option!');
} else {
alert('You did not pick a blue option.');
}
});
});
</script>
繰り返しますが、jsfiddle のデモです。
オブジェクトのmatchメソッドStringを使用して、正規表現を使用しています。blue特に、大文字と小文字を区別しない方法で文字を検索する正規表現(i最後の はそれを行います)。
このコードは現在、青いものを検出しているはずです。ついにそのテキスト フィールドを非表示にして表示する時が来ました!
ステップ 5
さっそく飛び込みましょう。
$(function() {
$('#text1').hide();
$('#select1').on('change', function(event) {
var opt = this.options[ this.selectedIndex ];
var picked_blue = $(opt).text().match(/blue/i);
if(picked_blue) {
$('#text1').show();
} else {
$('#text1').hide();
}
});
});
</p>
あなたはそれが来るのを見ましたか？それが何をするか推測できますか？
これがjsfiddle デモです。
これでミッションは完了です。これと同じテクニックをあらゆる種類のものに適用できます。
ここに散らばっているリンクに注意してください。特に、JavaScript と HTML の優れたプレイグラウンドである jsfiddle と、 Javascript と HTML の優れたリファレンスである MDN サイトへのリンクに注意してください。ああ、そしてjQueryのマニュアルへ。