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

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

コード

以下の2つのサンプルがあります。

No 説明
値を取得
13行目は、IDセレクタ(#color1)で対象を特定(28-30行目)しvalメソッドで選択されたvalue値を取得しています。
値を設定
19行目は、IDセレクタ(#color1)で対象を特定(28-30行目)しvalメソッドで指定したvalue値(blue)を設定しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	var str1;
	// ボタン1が押されたときの動作
	$("#b1").click(function() {
		// 1 値を取得
		str1 = $("#color1").val();
		$("#sp1").text(str1);
	});
	// ボタン2が押されたときの動作
	$("#b2").click(function() {
		// 2 値を設定
		$("#color1").val("blue");
		$("#sp1").text("blue");
	});
});
</script>
</head>
<body >
<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/>
<input type="button" id="b2" value="ボタン2" /><br/>
</body>
</html>

サンプル

上記コードのサンプルです。
ボタン1を押すと、セレクトボックスの選択されている値を表示します。
ボタン2を押すと、セレクトボックスの選択されている値を"青"にします。

選択した色


IDセレクタ

val()メソッド

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

val(value)メソッド

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

関連の記事

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




△上に戻る