jQuery セレクトボックスの値を取得/設定するサンプル

jQueryのセレクトボックスの値を取得/設定するサンプルです。

目次

値を取得する

値を取得するサンプルです。
7行目は、IDセレクタ(#color1)で対象を特定(14-16行目)しvalメソッドで選択されたvalue値を取得しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	var str1;
	$("#b1").click(function() {
		// 値を取得
		str1 = $("#color1").val();
		$("#sp1").text(str1);
	});
});
</script>
<p>選択した色 <span id="sp1"></span></p>
<select id="color1">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select><br/>
<input type="button" id="b1" value="ボタン1" /><br/>

サンプル

上記コードのサンプルです。

選択した色

 

値を設定する

値を設定するサンプルです。
7行目は、IDセレクタ(#color1)で対象を特定(14-16行目)しvalメソッドで指定したvalue値(blue)を設定しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#b2").click(function() {
		// 値を設定
		$("#color2").val("blue");

	});
});
</script>

<select id="color2">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select><br/>
<input type="button" id="b2" value="ボタン2" />

サンプル

上記コードのサンプルです。
ボタンを押すと青になります。

IDセレクタ

val()メソッド

  • jQueryのメソッドです。
  • val()は、valueの値を返します。
  • 以下はjQueryサイトの.val()メソッドのリンクです。
    http://api.jquery.com/val/

val(値)メソッド

  • jQueryのメソッドです。
  • val(値)は、valueに値をセットします。
  • 以下はjQueryサイトの.val(value)メソッドのリンクです。
    http://api.jquery.com/val/#val2

関連の記事

jQuery hiddenの値を取得/設定するサンプル
jQuery ラジオボタンの値を取得/設定するサンプル
jQuery チェックボックスの値を取得/設定するサンプル
jQuery テキストボックスの値を取得/設定するサンプル
jQuery テキストエリアの値を取得/設定するサンプル
JavaScript セレクトボックスの値を取得/設定するサンプル



△上に戻る