web-dev-qa-db-ja.com

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>
javascriptjqueryhtml
974
William Kinaan

ドロップダウンオプションについては、おそらくこのようなものが欲しいでしょう：

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

val()がうまくいかないのは、オプションをクリックしてもドロップダウンの値が変わらないからです - ドロップダウンの child という選択されたオプションに:selectedプロパティを追加するだけです。

1640
Elliot Bonneville

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

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

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

これで、他の人から提案された:selectedブードゥーの代わりに$('#aioConceptName').val()を呼び出すことができます。

303
Jacob Valenta

私はこの質問に出会い、Elliot BOnnevilleの答えをもっと簡潔に書いたものを作成しました。

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

または一般的に：

$('#id :pseudoclass')

これにより、余分なjQuery呼び出しが不要になり、すべてをワンショットで選択でき、より明確になります（私の意見）。

149
Ed Orsi

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

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

これはテキストの場合...

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

イベントコンテキストにいる場合は、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()を使います。

44
JoDev

あなたは普通の古いJavaScriptを使うことを考えましたか？

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

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

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

29
Roonaan
$('#aioConceptName option:selected').val();
17
wild_nothing

selectの値（テキストではない）を読む： 

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

選択を無効にする方法？ どちらの場合も、値は次のように変更できます。 

_ a _

ユーザーはドロップダウンを操作できません。そして彼は他にどのような選択肢が存在するのか知りません。

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

_ b _

ユーザーはドロップダウンでオプションを見ることができますが、それらすべては無効になっています。

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

この場合、$("#Status").val() は 1.9.0より小さいjQueryバージョンに対してのみ動作します。他のすべての亜種は動作します。

無効になった選択を更新する方法？

後ろのコードから、あなたはまだあなたのselectの中の値を更新することができます。ユーザーに対してのみ無効です。

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

場合によっては、イベントを発生させる必要があるかもしれません。

$("#Status").val(2).change();
11
profimedica
<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>
11
Ol Sen

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

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

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

9
Salman A

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

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

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

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

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

この構文を使うべきです：

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

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

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

あなたはフィドルでテストすることができます： http://jsfiddle.net/PJT6r/9/ /

この記事でこの答えについて見てください

8
D.L.MAN

その最良の答えを見つけた人にとってはうまくいきません。

使用してみてください：

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

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

8
user2709153

これでうまくいくはずです。

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

私もこれがよりよく理解するのに役立ち、これを試してみるのに役立つことを願っています。 $('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/

2
Vijayaragavan

これを試してみてください

$(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">
2
Haris Sultan

この方法でデバッグすることができます。

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

あなたがテキストノードの代わりに 'value'属性をつかみたいなら、これはあなたのために働きます：

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

簡単でとても簡単 

あなたのドロップダウン 

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

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

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

あなたは$("#drpList").val();を使うことができます

0
Author PraWin

あなたは正確に選択されたオプションを使用して選択することができます。

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

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

$("select#aioConceptName > option:selected").val()
0
Hafiz Shehbaz Ali
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

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

0
Satista

選択したタグのget value の場合：

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

そして text を取得したい場合はこのコードを使用してください。

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

例=>私はこのタグが選択されている：

<div id="id_Of_Parent_Selected_Tag">
<select >
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
    </select>
</div>
<script>
 $('#id_Of_Parent_Selected_Tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#id_Of_Parent_Selected_Tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>
0
mamal

私は同じ問題を抱えていたし、私のケースでそれがうまくいかなかった理由を考え出しました
htmlページが異なるhtmlフラグメントに分割され、私はselectと同じIdを持つ別の入力フィールドを持っていたため、val()は常に空になっていました
同様の問題を抱えている人にとっては、これで一日の節約になることを願っています。

0
Hasnaa Ibraheem

select =が選択されているかどうかを確認するために、同じclass = nameで選択を取得することができます。

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

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

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

他には、あなたが使用することができます

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

私はそれが役立つことを願っています..

0
Yusuf Azan