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

通常$("#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>

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

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

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

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

<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ブードゥー教が他の人から提案されている代わりに電話をかけることができます。

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

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

または一般的に：

$('#id :pseudoclass')

これにより、追加のjQuery呼び出しが節約され、すべてを1つのショットで選択し、より明確になります（私の意見）。

これをお試しください...

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

またはこれはテキスト用...

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

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

$('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()。

プレーンな古いJavaScriptの使用を検討しましたか？

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

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

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

$('#aioConceptName option:selected').val();

選択の値（テキストではない）を読み取る：

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

選択を無効にする方法は？ どちらのバリアントでも、値は以下を使用して変更できます。

あ

ユーザーはドロップダウンを操作できません。そして、彼は他にどんなオプションが存在するかもしれないか知りません。

$('#Status').prop('disabled', true);

B

ユーザーはドロップダウンにオプションを表示できますが、すべて無効になっています。

$('#Status option').attr('disabled', true);

この場合、$("#Status").val() はより小さいバージョンのjQueryでのみ機能します1.9.0。他のすべてのバリアントは機能します。

無効になっている選択を更新する方法は？

コードビハインドからも、selectの値を更新できます。ユーザーに対してのみ無効です：

$("#Status").val(2);

場合によっては、イベントを発生させる必要があります。

$("#Status").val(2).change();

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

次の構文を使用する必要があります。

var value = $('#Id :selected').val();

だからこのコードを試してください：

var values = $('#aioConceptName :selected').val();

Fiddleでテストできます：http : //jsfiddle.net/PJT6r/9/

この投稿でこの回答について参照してください

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

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

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

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

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

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

.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>

その最良の答えを見つけた人はだめです。

使用してみてください：

  $( "#aioConceptName option:selected" ).attr("value");

最近のプロジェクトで私のために働くので、それを見る価値があります。

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

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

単純明快で非常に簡単：

あなたのドロップダウン

<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.
});

次のようにしてデバッグを試すことができます。

console.log($('#aioConceptName option:selected').val())

選択したタグの値を取得する場合：

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

そして、テキストを取得したい場合は、次のコードを使用します。

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

例えば：

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

テキストノードの代わりに 'value'属性を取得したい場合は、これでうまくいきます。

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

これに挑戦

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

DDLをインデックス付きの配列として想像してください。1つのインデックスを選択しています。JSで設定するものを選択します。

これが理解を深め、以下で試すのにも役立つことを願っています

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

詳細については、http：//www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/をご覧ください 。

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

同じclass =名の選択をフェッチするには、これを行うことができ、選択オプションが選択されているかどうかを確認します。

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});

私は同じ問題を抱えていて、それが私のケースで機能していない理由を理解しました
HTMLページが異なるHTMLフラグメントに分割され、の同じIDを持つ別の入力フィールドがselectあるため、val()が常に空になっていることがわかりました
これにより、同様の問題を抱えているすべての人の日が節約されることを願っています。

$（ "＃id"）。valを使用するには、次のようにオプションに値を追加する必要があります。

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

それ以外の場合は使用できます

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

お役に立てれば幸いです。

この問題の簡単な解決策を次に示します。

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

おそらく、この種のシナリオで最善の策は、jQueryのchangeメソッドを使用して、現在選択されている値を見つけることです。

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

特定の選択フィールドで選択したオプションごとに機能を実行できるため、この方法をお勧めします。

お役に立てば幸いです。

通常、選択した値を取得するだけでなく、何らかのアクションを実行する必要があります。では、すべてのjQueryマジックを回避して、選択した値を引数としてアクション呼び出しに渡すだけではどうでしょうか。

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>

正確に選択されたオプションを使用して選択できます：以下はinnerTextを示します

$("select#aioConceptName > option:selected").text()

以下はあなたに価値を与えるでしょう。

$("select#aioConceptName > option:selected").val()