jQuery - セレクトボックス(コンボボックス)の設定と取得
公開日：2018-12-21
更新日：2019-05-14
更新日：2019-05-14
1. 概要
セレクトボックス(コンボボックス)の設定と取得を行います。
value ではなく、表示されている項目の値を取得したい場合は、value 取得後に、属性セレクタで value を指定して取得します。
value ではなく、表示されている項目の値を取得したい場合は、value 取得後に、属性セレクタで value を指定して取得します。
//項目の選択
$(selectタグへのセレクタ).val(選択したい項目の value)
//選択されている項目の value の取得
$(selectタグへのセレクタ).val()
2. サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<select id="fruits" size="3">
<option value="A" >apple</option>
<option value="B" >orange</option>
<option value="C" selected="selected">banana</option>
</select>
<input type="button" value="取得" onclick="get()" />
<input type="button" value="先頭を選択する" onclick="set()" /><br /><br />
<div id="msg1"></div>
<div id="msg2"></div>
<script>
function get() {
//選択されている項目の value を取得します
var value = $("#fruits").val();
//画面表示
$("#msg1").html( value );
$("#msg2").html( $("#fruits [value=" + value + "]").html() );
}
function set() {
//value="A" の項目を選択します
$("#fruits").val("A");
}
</script>
</body></html>
実行結果：画面
