Tファイル

【初心者向け】selectタグのvalueをjqueryで取得する方法

selectタグのvalueを取得する方法

こんにちは、webエンジニアのtakaです。

今回はjQueryでselectタグのvalueを取得する方法を解説していきます。

selectタグのvalueを取得する方法

通常のformタグでpostする場合は、特にvalueを取得したりする必要はありませんが、api・ajaxを利用する場合は、inputタグやselectタグのvalueタグのvalueを取得する必要があります。

以下のようなセレクトボックスがあります。

// HTML
<select id="fruit" name="fruit">
 <option value="apple">リンゴ</option>
 <option value="banana">バナナ</option>
 <option value="strawberry">いちご</option>
</select>
<button type="submit" id="submit-button">決定<button>

出力例


選択されたoptionのvalueを取得する方法は以下です。
val()メソッドで選択されているoptionのvalueを取得しています。

ボタンを押すと取得したvalueがpタグのテキストとして出力されるようにしてみましょう。

// JavaScript
$(function() {
 $('#submit-button').on('click', function() {
    // セレクトボックスで選択したvalueをfruitに代入
    var fruit = $('#fruit').val(); // 
    $('#fruit-value').text(fruit);
  });
});
// HTML
<select id="fruit" name="fruit">
 <option value="apple">リンゴ</option>
 <option value="banana">バナナ</option>
 <option value="strawberry">いちご</option>
</select>
<button type="submit" id="submit-button">決定<button>
<p id="fruit-value">→</p>

出力結果

tips!

JavaScriptで追加した要素にはclick()は利用できないため、click()ではなくon(‘click’, function())を利用しよう。

まとめ

今回の記事ではselectタグのvalueを取得する方法を見ていきました。
selectタグのva
この記事が開発の助けになれば幸いです。

それでは。

モバイルバージョンを終了