javascript - jQueryドロップダウンから選択したオプションを取得

Question

通常$("#id").val()、選択したオプションの値を返すために使用しますが、今回は機能しません。選択したタグには ID がありますaioConceptName

htmlコード

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

score 2087 · Accepted Answer

ドロップダウンオプションの場合、おそらく次のようなものが必要です。

var conceptName = $('#aioConceptName').find(":selected").text();

val()オプションをクリックしてもドロップダウンの値は変更されないため、トリックが実行されないのは、ドロップダウンの子である選択されたオプションにプロパティが追加されるだけだから:selectedです。

score 391 · Accepted Answer

各オプションの値を設定します

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val()属性を.val()返すため、機能しませんでした。value正しく機能させるには、value属性をそれぞれに設定する必要があります<option>。

これで、このすべてのブードゥー教が他の人によって提案される$('#aioConceptName').val()代わりに、電話をかけることができます。:selected

score 197 · Accepted Answer

私はこの質問に出くわし、Elliot BOnneville の回答のより簡潔なバージョンを作成しました。

var conceptName = $('#aioConceptName :selected').text();

または一般的に：

$('#id :pseudoclass')

これにより、余分な jQuery 呼び出しを節約でき、すべてを 1 回で選択でき、より明確になります (私の意見です)。

score 72 · Accepted Answer

値のためにこれを試してみてください...

$("select#id_of_select_element option").filter(":selected").val();

またはこれをテキストに...

$("select#id_of_select_element option").filter(":selected").text();

score 60 · Accepted Answer

$(this).find('option:selected')イベントコンテキストにいる場合、jQuery では、次のように :を使用して、選択したオプション要素を取得できます。

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

編集

PossessWithinで述べたように、私の答えは質問に対する答えです:選択した「オプション」を選択する方法。

次に、オプション値を取得するには、を使用しますoption.val()。

score 39 · Accepted Answer

普通の古い JavaScript を使用することを検討しましたか?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

JavaScript でオプションのテキスト/値を取得するも参照してください。

score 14 · Accepted Answer

jQuery で正しい選択を見つけるには、HTML ツリーで複数の選択が可能であり、予想される出力が混乱する可能性があることを考慮してください。

(:selected).val()または、複数の選択オプションでは正しく機能し(:selected).text()ません。したがって、最初にすべての選択の配列を保持して.map()から、目的の引数またはテキストを返します。

次の例は、これらの問題を示し、より良いアプローチを提供します

<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>

すべての選択を配列に保持し、探しているものを返す正しく動作するc と dと比較して、バリアントa、bの異なるバグが発生しやすい出力を参照してください。

score 11 · Accepted Answer

jQuery を使用して、changeイベントを追加し、そのハンドラー内で選択された値またはテキストを取得します。

選択したテキストが必要な場合は、次のコードを使用してください。

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

または、選択した値が必要な場合は、次のコードを使用してください。

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});

score 10 · Accepted Answer

jQuery.val()select 要素にも関数を使用します。

.val() メソッドは主に、input、select、textarea などのフォーム要素の値を取得するために使用されます。select 要素の場合、nullオプションが選択されていない場合は返され、少なくとも 1 つのオプションがあり、multiple属性が存在するためにさらに選択できる場合は、選択された各オプションの値を含む配列が返されます。

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>

score 9 · Accepted Answer

9

これだけでうまくいくはずです：

var conceptName = $('#aioConceptName').val();

于 2014-11-17T13:44:39.310 に答える

score 9 · Accepted Answer

簡単でとても簡単です：

あなたのドロップダウン

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

選択した値を取得するための Jquery コード

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});

score 4 · Accepted Answer

テキストノードの代わりに 'value' 属性を取得する場合は、次のようにします。

var conceptName = $('#aioConceptName').find(":selected").attr('value');

score 2 · Accepted Answer

2

使用できます$("#drpList").val();

于 2018-01-21T22:50:13.137 に答える

javascript - jQueryドロップダウンから選択したオプションを取得

33 に答える 33

Related

Reference