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

nas2017/06/15

目次

01. セレクトボックス

・value値を取得する

・value値を設定する(初期値設定などで使用)

・選択した文字を取得する

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

value値を取得する

選択した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/3.4.1/jquery.min.js"></script>
<script>

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

</script>

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

 

value値を設定する(初期値設定などで使用)

value値を設定するサンプルです。初期値の設定などに使用できます。
ボタンを押すと青が選択されます。

　

 

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

<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/3.4.1/jquery.min.js"></script>
<script>

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

</script>

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

 

選択した文字を取得する

選択した文字を取得するサンプルです。(value値ではありません)

選択した色

　

 

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

<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/3.4.1/jquery.min.js"></script>
<script>

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

</script>

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

 

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

セレクトボックスの値が変化したら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/3.4.1/jquery.min.js"></script>
<script>

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

</script>

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

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

△上に戻る