jQueryでプルダウンの値の取得と選択の方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでプルダウンの値の取得と選択の方法について、簡単に解説していきます。

HTML

jQueryではプルダウンの操作も容易です。

今回のHTMLのサンプルコードを以下に示します。

<select id="fruit">
    <option value="apple">りんご</option>
    <option value="grape">ぶどう</option>
    <option value="orange">みかん</option>
</select>
<input type="button" id="btnGet" value="取得">
<input type="button" id="btnSelectGrape" value="ぶどうを選択">

上記のコードでは、プルダウンの選択肢を3つとし、選択された値の取得ボタンとぶどうを選択するボタンを配置しています。

プルダウンの値の取得

プルダウンの値の取得はとても簡単です。

select要素に対し、valメソッドを実行するだけで取得できます。

$("#btnGet").click(function() {
  console.log($("#fruit").val());
});

上記の例では、idがfruitのselect要素の選択された値を取得します。

プルダウンの選択

プルダウンの選択も行えます。

select要素で、引数に選択する選択肢のvalue属性の値を指定したvalメソッドを実行します。

$("#btnSelectGrape").click(function() {
  $("#fruit").val('grape');
});

上記のコードの例では、fruitのidのselect要素について、value属性がgrapeの選択肢を選択させます。