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

来源：互联网发布：java守护线程的作用编辑：程序博客网时间：2024/05/17 22:00

セレクトボックスの値を参照したり、任意の値を選択状態にするなど、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(){
  varval=$('#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(){
  varop=$('#select1').children();
  for(vari=0;i<op.length;i++){
    varval=op.eq(i).val();
    varstr=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>

0 0