[jQuery]セレクトボックスを操作する方法（dropdownlist ）

セレクトボックスの値を参照したり、任意の値を選択状態にするなど、jQueryを使用したセレクトボックスの操作方法を記載します。

最初に操作対象のセレクトボックスを作成します。

1 2 3 4 5 6

<select id = "select1" >    <option value = "key1" > VAL1 </option>    <option value = "key2" > VAL2 </option>    <option value = "key3" > VAL3 </option>    <option value = "key4" > VAL4 </option> </select>

セレクトボックスの要素を取得する

現在選択されているセレクトボックスのValue値はval()で取得します。

1 2 3 4 5

<script> // <![CDATA[ $ ( function ( ) {    var val = $ ( '#select1' ) . val ( ) ; } ) ; // ]]></script>

現在選択されているセレクトボックスのテキストはtext()で取得します。 
テキストを取得するには、option:selectedを指定します。 
指定しない場合は、全てのテキストが取得されます。

1 2 3 4 5

<script> // <![CDATA[ $ ( function ( ) {    var val = $ ( '#select1 option:selected' ) . text ( ) ; } ) ; // ]]></script>

全ての要素を取得するには、children()で全ての要素を取得後に、for文などで1つずつ取り出します。

1 2 3 4 5 6 7 8

<script> // <![CDATA[ $ ( function ( ) {    var op = $ ( '#select1' ) . children ( ) ;    for ( var i = 0 ; i < op . length ; i ++ ) {      var val = op . eq ( i ) . val ( ) ;      var str = op . eq ( i ) . text ( ) ; } ) ; // ]]></script>

セレクトボックスの要素を選択状態にする

要素を選択状態にするには、.val()の引数にValue値を指定します。

1 2 3 4 5 6 7 8

<script> // <![CDATA[ $ ( function ( ) {    // key3の要素を選択状態にする    $ ( '#select1' ) . val ( "key3" ) ;    // changeイベントまで実行する場合    // $('#select1').val("key3").change(); } ) ; // ]]></script>

セレクトボックスの要素を追加する

要素を追加するには、.append()の引数にオプション要素を指定します。

1 2 3 4 5 6

<script> // <![CDATA[ $ ( function ( ) {    // key5の要素を追加    $ ( '#select1' ) . append ( '<option value="key5">VAL5</option>' ) ; } ) ; // ]]></script>

セレクトボックスの状態を取得する

セレクトボックスが有効か無効かの状態を取得するには、.enabledセレクターで判定します。

1 2 3 4 5 6 7 8 9

<script> // <![CDATA[ $ ( function ( ) {    if ( $ ( '#select1' ) . is ( ':enabled' ) ) {      // 有効の場合    } else {      // 無効の場合    } } ) ; // ]]></script>