Javascript プルダウンの任意の項目を選択状態にする
いままで
|
1 |
$('select[name=city] option[value=0001]').attr('checked', 'checked'); |
こんな感じでselectボックスのoptionの値が〜だったやつをattrでchecked属性追加！なんて面倒なことやってたんだけど。
selectのval()で、optionのvalueを設定するだけで、選択状態になる
以下の例では、プルダウンに4つの項目が存在していて、optionのvalueは0001〜0004となっている。テキストボックスにそのoptionの値(value)を入力し、ボタンを押すと指定した項目が選択状態となる、例
|
1 2 3 4 5 6 7 8 9 |
<input type="text" id="value"/> <input type="button" value="を選択" onclick="doSelect();" /> <br /> <select name="non" id="non"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> |
selectのオブジェクトを取得してきて、そのオブジェクトのvalにセットするのがみそ。
|
1 2 3 4 |
function doSelect() { var value = $('#value').val(); $('#city').val(value); } |
例2
|
1 2 3 4 5 6 |
<select id="select_test"> <option value="1">選択肢１</option> <option value="2">選択肢２</option> <option value="3">選択肢３</option> <option value="4">選択肢４</option> </select> |
まずは基本となる選択値を取得する方法です。
|
1 2 3 4 |
$("#get_button").click( function(){ var selectVal = $("#select_test").val(); alert(selectVal); }); |
テキストボックスの値取得の方法と同様に .val() で取得できます。プルダウン値を変更すると、取得される value 値も変わります。
例3
セレクトボックスのデータ操作は value 値の取得と設定が基本になりますが、選択したプルダウンに表示されたテキスト（option タグの中にしたテキスト）を取得することもできます。
|
1 2 3 4 |
$("#get_button").click( function(){ var selectVal = $("#select_test option:selected").text(); alert(selectVal); }); |
値を取得したいセレクトボックスの中にある選択されたプルダウンの要素は「option:selected」で取得することができます。あとはその要素内のテキストを取得するために .text() を利用します。
選択するプルダウンを変更すれば、取得されるテキストも変わります。
以上、jQuery でセレクトボックスのプルダウンを選択したり、値を取得する方法の紹介でした。
