JavaScript を使用してドロップダウン リストから選択した値を取得するにはどうすればよいですか?
以下の方法を試しましたが、それらはすべて値の代わりに選択されたインデックスを返します。
var e = document.getElementById("ddlViewBy");
function show(){
var as = document.forms[0].ddlViewBy.value;
var strUser = e.options[e.selectedIndex].value;
console.log(as, strUser);
}
e.onchange=show;
show();<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>次のような select 要素がある場合:
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
このコードの実行:
var e = document.getElementById("ddlViewBy");
var strUser = e.value;
になりstrUserます2。実際に必要なものが である場合はtest2、次のようにします。
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
どちらstrUserがtest2
プレーンJavaScript：
var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
jQuery：
$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option
AngularJS：（http://jsfiddle.net/qk5wwyct）：
// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>
// JavaScript
$scope.items = [{
value: 'item_1_id',
text: 'Item 1'
}, {
value: 'item_2_id',
text: 'Item 2'
}];
var strUser = e.options[e.selectedIndex].value;
これは正しく、値が得られるはずです。それはあなたが求めているテキストですか？
var strUser = e.options[e.selectedIndex].text;
したがって、用語については明確です。
<select>
<option value="hello">Hello World</option>
</select>
このオプションには次のものがあります。
次のコードは、JavaScriptを使用した入力/選択フィールドからの値の取得/入力に関連するさまざまな例を示しています。
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()">
次のスクリプトは、選択したオプションの値を取得して、テキストボックス1に入力します。
<script>
function run() {
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
</script>
次のスクリプトは、テキストボックス2から値を取得し、その値でアラートを出します。
<script>
function up() {
//if (document.getElementById("srt").value != "") {
var dop = document.getElementById("srt").value;
//}
alert(dop);
}
</script>
次のスクリプトは、関数から関数を呼び出しています
<script>
function up() {
var dop = document.getElementById("srt").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
}?
</script>
純粋に Internet Explorer 用に記述されたコードに出くわしたことがある場合は、次のように表示されることがあります。
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
上記を Firefox などで実行すると、「関数ではありません」というエラーが表示されます。これは、Internet Explorer では [] の代わりに () を使用できるためです。
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
正しい方法は、角括弧を使用することです。
<select id="Ultra" onchange="alert(this.value)">
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select>
要素内からアクセスする場合、どの入力/フォーム フィールドでも「this」キーワードを使用できます。これにより、dom ツリーでフォームを見つけてから、フォーム内でこの要素を見つける必要がなくなります。
初心者は、ID 属性ではなく NAME 属性を使用して選択から値にアクセスする可能性があります。ID を取得する前であっても、すべてのフォーム要素に名前が必要であることはわかっています。
getElementsByName()そのため、新しい開発者も見られるように、ソリューションを追加しています。
注意。フォーム要素の名前は、投稿後にフォームを使用できるようにするために一意である必要がありますが、DOM では名前を複数の要素で共有できます。そのため、可能であればフォームに ID を追加するか、フォーム要素名my_nth_select_named_xとmy_nth_text_input_named_y.
使用例getElementsByName：
var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;
使うだけ
$('#SelectBoxId option:selected').text();リストされたテキストを取得するため
$('#SelectBoxId').val();選択したインデックス値を取得するため
jQuery の使用:
$('select').val();
id可能性、コードの直感性、およびvsの使用により、以前の回答にはまだ改善の余地がありますname。選択したオプションの 3 つのデータ (インデックス番号、値、テキスト) を読み取ることができます。この単純なクロスブラウザー コードは、次の 3 つすべてを実行します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
</head>
<body>
<form name="demoForm">
<select name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="A">Option 1</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
</select>
</form>
<p id="firstP"> </p>
<p id="secondP"> </p>
<p id="thirdP"> </p>
<script>
function showData() {
var theSelect = demoForm.demoSelect;
var firstP = document.getElementById('firstP');
var secondP = document.getElementById('secondP');
var thirdP = document.getElementById('thirdP');
firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
}
</script>
</body>
</html>
ライブ デモ: http://jsbin.com/jiwena/1/edit?html,output。
idメイクアップの目的で使用する必要があります。機能的なフォームの目的でnameは、HTML5 でも有効であり、引き続き使用する必要があります。最後に、特定の場所での角括弧と丸括弧の使用に注意してください。前に説明したように、(古いバージョンの) Internet Explorer のみがすべての場所で丸いものを受け入れます。
別の解決策は次のとおりです。
document.getElementById('elementId').selectedOptions[0].value
2015 年にはFirefoxで、以下も動作します。
e. オプション.selectedIndex
以下は JavaScript コード行です。
var x = document.form1.list.value;
name="list"ドロップダウン メニューが list という名前で、name 属性を持つフォームに含まれていると仮定しますname="form1"。
試す
ddlViewBy.value // value
ddlViewBy.selectedOptions[0].text // label
console.log( ddlViewBy.value );
console.log( ddlViewBy.selectedOptions[0].text );<select id="ddlViewBy">
<option value="1">Happy</option>
<option value="2">Tree</option>
<option value="3" selected="selected">Friends</option>
</select>