こんにちは、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
この記事が開発の助けになれば幸いです。
それでは。