web-dev-qa-db-ja.com

JavaScriptを使用してドロップダウンリストから選択した値を取得しますか？

JavaScriptを使用してドロップダウンリストから選択した値を取得する方法

私は以下のメソッドを試しましたが、それらはすべて値の代わりに選択されたインデックスを返します：

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
var value = document.getElementById("ddlViewBy").value;
javascripthtml-select
1524
Fire Hand

このような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にするでしょう

2513
Paolo Bergantino

普通の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").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'
}];
312
Vitalii Fedorenko
var strUser = e.options[e.selectedIndex].value;

これは正しいので、あなたに価値を与えるべきです。

var strUser = e.options[e.selectedIndex].text;

それで、あなたは専門用語で明白です：

<select>
    <option value="hello">Hello World</option>
</select>

このオプションは以下のとおりです。

  • インデックス= 0
  • 値=こんにちは
  • テキスト= Hello World
162
Greg

次のコードは、JavaScriptを使用して入力/選択フィールドから値を取得/配置することに関するさまざまな例を示しています。

ソースリンク

Working デモ 

 <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>
51
Code Spy
var selectedValue = document.getElementById("ddlViewBy").value;
29
Mohammad Faisal

純粋にIEのために書かれたコードに出くわすなら、これを見るかもしれません：

var e = document.getElementById("ddlViewBy"); 
var strUser = e.options(e.selectedIndex).value;

Firefoxなどで上記を実行すると、IEで[]ではなくusing（）を使用できなくなるため、「関数ではありません」というエラーが発生します。

var e = document.getElementById("ddlViewBy");    
var strUser = e.options[e.selectedIndex].value;

正しい方法は角括弧を使うことです。

18
Carl Onager
<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>
13
boateng

ただ使う

  • リストされているテキストを取得するための$('#SelectBoxId option:selected').text();

  • 選択されたインデックス値を取得するための$('#SelectBoxId').val();

12
Marvil Joy

初心者は、ID属性ではなくNAME属性を持つ選択からの値にアクセスしたいと思うでしょう。すべてのフォーム要素は、IDを取得する前でも名前が必要です。

だから、私はgetElementByName()ソリューションを新しい開発者にも見せるためだけに追加しています。

NB。フォーム要素の名前は、一度送信されたフォームを使用できるようにするために一意である必要がありますが、DOMでは名前を複数の要素で共有することができます。そのため、可能であれば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;
11
Ben Greenaway

可能性、直感的なコード、およびidと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">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</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でも有効であり、まだ使用されるべきです。最後に、特定の場所では角括弧と丸括弧の使用に注意してください。前に説明したように、（[古いバージョンの）IEのみがすべての場所で丸いものを受け入れます。 

8
Frank Conijn

記事JavaScriptまたはjQueryを使用したドロップダウン要素の選択を参照してください。彼らはJavaScriptとjQueryを使ってさまざまな方法でそれを説明しました。

JQueryを使う：

$(‘select’).val();
6
user5846985

querySelectorを使うことができます。

例 

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;
6
Rounin

仕組みの実行例：

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の変更を実装してください。

4
Ani Menon

これを行うには、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'
4
Dulith De Costa

上記の答えと一緒に行くために、これは私がワンライナーとしてそれをする方法です。これは選択されたオプションの実際のテキストを取得するためのものです。インデックス番号を取得するための良い例があります。 （そして、テキストについては、私はちょうどこのように見せたかったです）

var selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

まれに括弧を使用する必要がある場合もありますが、これは非常にまれです。

var selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

私はこのプロセスが2行バージョンよりも速いとは思わない。私は自分のコードを可能な限り統合したいだけです。

要素を2回取得しなくても1行でこれを実行する方法を誰かが知っている場合、私はあなたがコメントしてどのように私に見せるのが大好きです。私はまだそれを理解することができていません...

3
Genko

2015年、 Firefox では、以下も動作します。

e. options 。selectedIndex

3
Hector Llorens

別の解決策は：

document.getElementById('elementId').selectedOptions[0].value
2
JworKer

これがJavaScriptコード行です。

var x = document.form1.list.value;

ドロップダウンメニューがlist name="list"という名前で、name属性がname="form1"のフォームに含まれているとします。

2
Belgacem Ksiksi

document.getElementById('idselect').options.selectedIndexだけ

それからあなたは私が0から始めて、選択インデックス値を取得します。

1
Knautiluz

このコードが機能しない理由は、IE7-を使用していて、<option>タグのvalue属性を指定し忘れている場合だけです。他のすべてのブラウザでは、オプションとして開閉タグ内のものを変換する必要があります値。

1
peirix

Selectの選択されたオプションの値を取得するためにselectElement.valueを使うことができます。

document.getElementById("idOfSelect").value;


var res = document.querySelector('p');
var select = document.querySelector('select');
res.textContent = "Selected Value: "+select.value;
select.addEventListener("change", function(e){
  res.textContent = "Selected Value: "+select.value;
});
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Change value of the select to show the value.
<p>
</p>

0
hev1

私は少し違った見方をしています、これを達成する方法。私はたいてい次のようなやり方でこれをやっています：（私の知る限りではもっと簡単な方法で全てのブラウザで動作します）

<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>
0
ThomAce