JavaScriptを使用してドロップダウンリストから選択した値を取得するにはどうすればよいですか?
以下の方法を試しましたが、すべて値ではなく選択したインデックスを返します。
var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
JavaScriptを使用してドロップダウンリストから選択した値を取得するにはどうすればよいですか?
以下の方法を試しましたが、すべて値ではなく選択したインデックスを返します。
var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
回答:
次のような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.options[e.selectedIndex].value;
にstrUser
なります2
。あなたが実際に欲しいのはtest2
なら、これを行います:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
どちらになるだろうstrUser
ことtest2
onchange
:)
var strUser = e.options[e.selectedIndex].value;
理由だけではないvar strUser = e.value ?
var e = document.getElementById("ddlViewBy").value;
e.target.options[e.target.selectedIndex].text
、それはここにすべての答えで間違っている理由はわかりません...
プレーン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'
}];
element.options[e.selectedIndex].value
でなければなりませんelement.options[element.selectedIndex].value
e.target.options[e.target.selectedIndex].text
、それはここにすべての答えで間違っている理由はわかりません...
var strUser = e.options[e.selectedIndex].value;
これは正解であり、価値を与えるはずです。あなたが求めているテキストですか?
var strUser = e.options[e.selectedIndex].text;
だからあなたは用語が明確です:
<select>
<option value="hello">Hello World</option>
</select>
このオプションには:
e.target.options[e.target.selectedIndex].text
、それはここにすべての答えで間違っている理由はわかりません...
次のコードは、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>
onchange=run(this.value)
または(this.text)
より有益なことができます。
var selectedValue = document.getElementById("ddlViewBy").value;
純粋にInternet Explorer用に作成されたコードに出くわした場合、次のように表示されます。
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
上記をFirefoxなどで実行すると、「is not a function」エラーが発生します。これは、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属性を使用して、selectの値にアクセスする可能性があります。IDを取得する前であっても、すべてのフォーム要素には名前が必要です。
だから、私はgetElementByName()
新しい開発者も見るためのソリューションを追加しています。
NB。フォーム要素の名前は、投稿後にフォームを使用できるようにするために一意である必要がありますが、DOMでは、1つの名前を複数の要素で共有できます。そのため、可能であればフォームにIDを追加することを検討してください。または、フォーム要素名で明示的にしてmy_nth_select_named_x
、my_nth_text_input_named_y
。
使用例getElementByName
:
var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
JavaScriptまたはjQueryを使用してこれを行うには、2つの方法があります。
JavaScript:
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
または
var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert (value); // This will output the value selected
alert (text); // This will output the text of the value selected
jQuery:
$("#ddlViewBy:selected").text(); // Text of the selected value
$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'
使うだけ
$('#SelectBoxId option:selected').text();
リストにあるテキストを取得するため
$('#SelectBoxId').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だけです。
jQueryの使用:
$('select').val();
それがどのように機能するかの実行例:
var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;
document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3" selected="selected">test3</option>
</select>
注:ドロップダウンが変更されても値は変更されません。その機能が必要な場合は、onClick変更を実装する必要があります。
私はこれを達成する方法について少し異なる見解を持っています。私は通常、次のアプローチでこれを行っています(これはより簡単な方法であり、私の知る限りすべてのブラウザーで機能します)。
<select onChange="functionToCall(this.value);" id="ddlViewBy">
<option value="value1">Text one</option>
<option value="value2">Text two</option>
<option value="value3">Text three</option>
<option value="valueN">Text N</option>
</select>
これまでの答えに合わせるために、これは私がワンライナーとしてそれを行う方法です。これは、選択したオプションの実際のテキストを取得するためのものです。すでにインデックス番号を取得する良い例があります。(そしてテキストのために、私はこのように見せたかっただけです)
let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
まれに、括弧を使用する必要がある場合がありますが、これは非常にまれです。
let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
これが2行バージョンよりも速く処理されることはないと思います。私はコードをできるだけ統合したいだけです。
残念ながら、これはまだ要素を2回フェッチするため、理想的ではありません。要素を1回だけ取得する方法の方が便利ですが、1行のコードでこれを実行することに関しては、まだわかりません。
JavaScriptコード行は次のとおりです。
var x = document.form1.list.value;
listという名前のドロップダウンメニューがありname="list"
、name属性を持つフォームに含まれていると仮定しますname="form1"
。
var as = document.form1.ddlViewBy.value;
...」
querySelector
これを達成するために使用する必要があります。これにより、フォーム要素から値を取得する方法も標準化されます。
var dropDownValue = document.querySelector('#ddlViewBy').value;
フィドル:https : //jsfiddle.net/3t80pubr/
私が質問を正しく答えていない人かどうかはわかりませんが、これは私にとってはうまくいきました:HTMLでのonchange()イベントの使用。
<select id="numberToSelect" onchange="selectNum">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
// javascript
function sele(){
var strUser = numberToSelect.value;
}
これにより、クリックごとの選択ドロップダウンにある値が表示されます
onchange関数でこれを行う簡単な方法を次に示します。
event.target.options[event.target.selectedIndex].dataset.name
ただやる: document.getElementById('idselect').options.selectedIndex
次に、0から始まる選択インデックス値を取得します。
いくつかのオプションを備えたドロップダウンメニューを作成します(必要な数だけ!)
<select>
<option value="giveItAName">Give it a name
<option value="bananaShark">Ridiculous animal
<ooption value="Unknown">Give more options!
</select>
ちょっと面白かったです。コードスニペットは次のとおりです。
<select>
<option value="RidiculousObject">Banana Shark
<option value="SuperDuperCoding">select tag and option tag!
<option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
<option value="Single">Single Option
</select>
はい、スニペットは機能しました