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

jQueryでセレクトボックスを操作する

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

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

<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()で取得します。

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

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

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

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

<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値を指定します。

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

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

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

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

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

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

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