セレクトボックスの選択を思い通りに！ jQueryによるインデックス設定テクニック
jQuery でセレクトボックスの選択インデックスを設定する方法
jQuery を使って、セレクトボックス (ドロップダウンリスト) の選択されているオプションのインデックスを設定する方法について解説します。
説明
セレクトボックスの選択インデックスとは、選択されているオプションの順番を表す数字です。インデックスは 0 から始まり、1 つ目のオプションはインデックス 0、2 つ目のオプションはインデックス 1 というように、順番に増えていきます。
方法
jQuery でセレクトボックスの選択インデックスを設定するには、以下のいずれかの方法を使用できます。
prop() メソッドを使う
$(selector).prop('selectedIndex', index);
この方法は、最もシンプルで分かりやすい方法です。selector はセレクトボックスを識別するセレクター、index は設定したいインデックスです。
例
$('#mySelect').prop('selectedIndex', 2);
この例では、mySelect という ID を持つセレクトボックスの選択インデックスを 2 に設定します。つまり、3 番目のオプションが選択されます。
$(selector).val(value);
$('#mySelect').val('option3');
この例では、mySelect という ID を持つセレクトボックスで、option3 という値を持つオプションを選択します。オプションの値が分からない場合は、prop() メソッドを使う方が安全です。
$(selector).eq(index).prop('selected', true);
$('#mySelect').eq(2).prop('selected', true);
注意事項
- 上記の方法は、いずれも jQuery 1.6 以降で使用できます。
- 選択インデックスを設定しても、
changeイベントは発生しません。イベントを発生させたい場合は、trigger('change')メソッドを呼び出す必要があります。
jQuery でセレクトボックスの選択インデックスを設定するには、prop(), val(), eq() メソッドのいずれかを使用できます。それぞれの方法には長所と短所があるので、状況に応じて使い分けるようにしましょう。
jQuery でセレクトボックスの選択インデックスを設定するサンプルコード
prop() メソッドを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでセレクトボックスの選択インデックスを設定</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// ページロード時に3番目のオプションを選択
$('#mySelect').prop('selectedIndex', 2);
// ボタンをクリックしたら2番目のオプションを選択
$('#button').click(function() {
$('#mySelect').prop('selectedIndex', 1);
});
});
</script>
</head>
<body>
<select id="mySelect">
<option value="option1">オプション1</option>
<option value="option2">オプション2</option>
<option value="option3">オプション3</option>
</select>
<button id="button">2番目のオプションを選択</button>
</body>
</html>
このコードでは、以下の処理を行います。
buttonという ID を持つボタンをクリックすると、mySelectセレクトボックスの 2 番目のオプションを選択します。
val() メソッドを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでセレクトボックスの選択インデックスを設定</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// ページロード時にoption3を選択
$('#mySelect').val('option3');
// ボタンをクリックしたらoption2を選択
$('#button').click(function() {
$('#mySelect').val('option2');
});
});
</script>
</head>
<body>
<select id="mySelect">
<option value="option1">オプション1</option>
<option value="option2">オプション2</option>
<option value="option3">オプション3</option>
</select>
<button id="button">2番目のオプションを選択</button>
</body>
</html>
このコードは、上記のコードと同様に動作しますが、val() メソッドを使用してオプションの値を使って選択インデックスを設定しています。
eq() メソッドを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでセレクトボックスの選択インデックスを設定</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// ページロード時に3番目のオプションを選択
$('#mySelect').eq(2).prop('selected', true);
// ボタンをクリックしたら2番目のオプションを選択
$('#button').click(function() {
$('#mySelect').eq(1).prop('selected', true);
});
});
</script>
</head>
<body>
<select id="mySelect">
<option value="option1">オプション1</option>
<option value="option2">オプション2</option>
<option value="option3">オプション3</option>
</select>
<button id="button">2番目のオプションを選択</button>
</body>
</html>
jQuery でセレクトボックスの選択インデックスを設定するその他の方法
$(selector).children().eq(index).prop('selected', true);
この方法は、children() メソッドを使ってセレクトボックス内のオプションの配列を取得し、その配列からインデックスを使ってオプションを直接選択する方法です。
$('#mySelect').children().eq(2).prop('selected', true);
$(selector).filter(function() {
return $(this).val() === value;
}).prop('selected', true);
この方法は、filter() メソッドを使ってオプションの値を使ってオプションを絞り込み、そのオプションを直接選択する方法です。
$('#mySelect').filter(function() {
return $(this).val() === 'option3';
}).prop('selected', true);
$(selector).each(function(index) {
if (index === selectedIndex) {
$(this).prop('selected', true);
return false;
}
});
$(selector).each(function(index) {
if (index === 2) {
$(this).prop('selected', true);
return false;
}
});
jquery jquery-selectors
