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

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

目次

value値を取得する

サンプルです。
セレクトボックスの値を選択しボタンを押すと選択したvalue値が表示されます。

選択した色

 

コード

上記サンプルのコードです。
3-7行目は、セレクトボックスです。
16行目は、IDセレクタ(#color1)で対象を特定(4-6行目)しvalメソッドで選択されたvalue値を取得しています。

<p>選択した色 <span id="span1"></span></p>

<select id="color1">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>
<input type="button" id="button1" value="ボタン1" />

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

	$("#button1").click(function() {
		// value値を取得
		var str1 = $("#color1").val();
		$("#span1").text(str1);
	});
});
</script>

 

value値を設定する

サンプルです。
ボタンを押すと青が選択されます。

 

コード

上記サンプルのコードです。
1-5行目は、セレクトボックスです。
14行目は、IDセレクタ(#color2)で対象を特定(2-4行目)しvalメソッドで指定したvalue値(blue)を設定しています。

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

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

	$("#button2").click(function() {
		// value値を設定
		$("#color2").val("blue");
	});
});
</script>

 

選択した文字を取得する

サンプルです。
セレクトボックスを選択しボタンを押すと選択した文字が表示されます。(value値ではありません)

選択した色

 

コード

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

3-7行目は、セレクトボックスです。
16行目は、IDセレクタ(#color3)で対象を特定(4-6行目)し、option:selectedで選択した文字を取得しています。

<p>選択した色 <span id="span3"></span></p>

<select id="color3">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>
<input type="button" id="button3" value="ボタン3" />

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

	$("#button3").click(function() {
		// 選択した文字を取得
		var str1 = $("#color3 option:selected").text();
		$("#span3").text(str1);
	});
});
</script>

 

セレクトボックスの値が変化したらvalue値を取得する

サンプルです。
セレクトボックスの値が変化したらvalue値を取得します。

選択した色

コード

上記サンプルのコードです。
4-6行目は、セレクトボックスです。
13行目は、対象に変化のイベントがあったとき、15,16行目が実行されます。
15行目は、IDセレクタ(#color4)で対象を特定(4-6行目)しvalメソッドで選択されたvalue値を取得しています。

<p>選択した色 <span id="span4"></span></p>

<select id="color4">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>

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

	$("#color4").change(function() {
		// value値を取得
		var str1 = $("#color4").val();
		$("#span4").text(str1);
	});
});
</script>

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 セレクトボックスの値を取得/設定するサンプル

△上に戻る