jQueryを使用してドロップダウンの項目の選択された値を取得します

443

jQueryを使用してドロップダウンボックスの選択した値を取得するにはどうすればよいですか？
使ってみた

var value = $('#dropDownId').val();

そして

var value = $('select#dropDownId option:selected').val();

しかし、どちらも空の文字列を返します。

jquery 
— シャム
ソース
3
それらの両方が動作するはずです。問題は別の場所にある必要があります（たとえば、そのコードは$(document).ready(...ブロックにラップされていますか？）
— karim79
4
var value = $('#dropDownId:selected').val();
— ant
2
いいえ- $('#dropDownId').val();選択した値を取得する最も簡潔な方法です。
— karim79
1
あなたはIDが文書のためのユニークなので、あなたがクラスに参照のうえ場合にのみ、タグ名を使用する必要があり、この声明の中で選択する必要はありません@shyam select#dropDownId option:selected、
— アリ
— select-

回答:

840

単一選択のdom要素の場合、現在選択されている値を取得するには：

$('#dropDownId').val();

現在選択されているテキストを取得するには：

$('#dropDownId :selected').text();
— ピーター・マック
ソース
11
前にスペースが必要:selectedです。
— インタージェイ2010年
53
最速選択されたオプションのテキストを取得する方法がある：$("#dropDownId").children("option").filter(":selected").text()
— RickardN
3
リンクされた参照.val()と.text()
— シャリーフ
8
リチャード、コードが長すぎる...読みやすくするためにはるかに簡潔にすることができます
— PositiveGuy
2
@ JamesM.Lay変数に格納されたDOM参照を配置しますか？次に使用jQuery(domVariable).val()
— Allen Linatoc
57 
var value = $('#dropDownId:selected').text()

正常に動作するはずです。次の例をご覧ください。

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />
スニペットを展開

— ニック・リーブ
ソース
4
「値」はほとんどのコーダーが見逃している要素ですが、要素とクエリの宣言は代わりにテキストを返し続けます
— Asad
こちらのデモを確認してくださいfreakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html
— Code Spy
22

このjQueryを試してください、

$("#ddlid option:selected").text();

またはこのjavascript、

 var selID=document.getElementById("ddlid");
 var text=selID.options[selID.selectedIndex].text;

テキストではなく値にアクセスする必要がある場合は、val()ではなくメソッドを使用してみてくださいtext()。

以下のフィドルリンクを確認してください。

Demo1 | デモ2

— ラッキー
ソース
14

これを試して

$("#yourDropdown option:selected").text();
— クヴァディヤタール
ソース
OPは選択された値を要求しています。この答えは、ドロップダウンのテキストコンテンツを取得します。間違いではなく、彼が求めていたものだけではありません。
— ジョシュアダンス
12

私はこれがひどく古い投稿であることを知っており、おそらくこの悲惨な復活のためにむち打たれるべきですが、私の武器のすべてのアプリケーションを通して使用する非常に役立ついくつかの小さなJSスニペットを共有すると思いました...

入力する場合：

$("#selector option:selected").val() // or
$("#selector option:selected").text()

古くなっている場合は、これらの小さなクランペットをグローバル*.jsファイルに追加してみてください。

function soval(a) {
    return $('option:selected', a).val();
}
function sotext(a) {
    return $('option:selected', a).text();
}

そして単に書くsoval("#selector");かsotext("#selector");代わりに！2つを組み合わせて、valueとtext！

function so(a) {
    my.value = $('option:selected', a).val();
    my.text  = $('option:selected', a).text();
    return my;
}

特にフォームが多いアプリケーションでは、貴重な時間を大幅に節約できます。

— DevlshOne
ソース
9

これにより、選択した値が警告されます。jQueryコード...

$(document).ready(function () {

        $("#myDropDown").change(function (event) {
            alert("You have Selected  :: "+$(this).val());
        });
    });

HTMLコード...

<select id="myDropDown">
        <option>Milk</option>
        <option>Egg</option>
        <option>Bread</option>
        <option>Fruits</option>
    </select>
— ウタイヤ
ソース
8

さらに別のテスト済みの例：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $('#bonus').change(function() {
    alert($("#bonus option:selected").text());
  });  
});
</script>
</head>

<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>
— Jスリック
ソース
3

select-elementにIDを指定しましたか？

<select id='dropDownId'> ...

最初のステートメントが機能するはずです！

— schaechtele
ソース
3

選択したテキストを使用する場合：

value: $('#dropDownId :selected').text();

選択した値を使用する場合：

value: $('#dropDownId').val();
— マヒ
ソース
2

のidドロップダウンコントロールに対して生成されたhtmlは動的なものになります。したがって、完全なIDを使用してください$('ct100_<Your control id>').val().。

— VenkeHV
ソース
2

またはあなたがしようとする場合：

$("#foo").find("select[name=bar]").val();

私は今日それを使用し、それはうまくいきました。

— 固体
ソース
2

使用する

$('#dropDownId').find('option:selected').val()

これはうまくいくはずです:)

— ナミラ
ソース
2

ドロップダウンからjquery値を取得するには、送信した以下の関数を使用idして、選択した値を取得します。

function getValue(id){
    var value = "";
    if($('#'+id)[0]!=undefined && $('#'+id)[0]!=null){
        for(var i=0;i<$('#'+id)[0].length;i++){
            if($('#'+id)[0][i].selected == true){
                if(value != ""){
                    value = value + ", ";
                }
                value = value + $('#'+id)[0][i].innerText;
            }
        }
    }
    return value;
}
— ビレンドラ・カーデ
ソース
それを行う困難な方法ですが、何でもうまくいきます。
— MC9000
2 

	function fundrp(){
	var text_value = $("#drpboxid option:selected").text();  
	console.log(text_value);
	var val_text = $("#drpboxid option:selected").val();  
	console.log(val_text);
	var value_text = $("#drpboxid option:selected").attr("vlaue") ;
	console.log(value_text);
	var get_att_value = $("#drpboxid option:selected").attr("id") 
	console.log(get_att_value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="drpboxid">
	<option id="1_one" vlaue="one">one</option>
	<option id="2_two" vlaue="two">two</option>
	<option id="3_three" vlaue="three">three</option>              
</select>
<button id="btndrp" onclick="fundrp()">Tracking Report1234</button>
スニペットを展開

— サクティ・スダン
ソース
1

私はこれが古いことを知っていますが、私はこれをより最新の回答で更新します 

$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
 alert(prepMin);
});

これが役に立てば幸い

— mindmyweb
ソース
1

これらのコードのいずれかを使用 

$('#dropDownId :selected').text();

または

$('#dropDownId').text();
— ビピン
ソース
1

これを行うには、次のコードを使用します。

$('#dropDownId').val();

選択リストのオプションから選択した値を取得する場合。これでうまくいきます。

$('#dropDownId option:selected').text();
— デュリスデコスタ
ソース
0

次のいずれかを使用できます。

$(document).on('change', 'select#dropDownId', function(){

            var value = $('select#dropDownId option:selected').text();

            //OR

            var value = $(this).val();

});
— スレシュ・ブルダク
ソース
0

これを試して：

 $('#dropDownId option').filter(':selected').text();     

 $('#dropDownId option').filter(':selected').val();
— サラバナイド
ソース
0

以下のメソッドを使用して、ページの読み込み時に選択した値を取得します。

$(document).ready(function () {
$('#ddlid').on('change', function () {
                var value = $('#ddlid :selected').text();
                alert(value);`
            });
});
— ウチラサミー
ソース
0

ドロップダウンが複数ある場合は、以下を試してください。

HTML：

<select id="dropdown1" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>
<select id="dropdown2" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>

JavaScript：

    function myFunction(sel) {
        var selected = sel.value;
    }
— RGriffiths
ソース
0

HTML：

<select class="form-control" id="SecondSelect">
       <option>5<option>
       <option>10<option>
       <option>20<option>
       <option>30<option>
</select>

JavaScript：

var value = $('#SecondSelect')[0].value;
— マーディ・ホセイニ
ソース
これが問題を解決する方法と理由の説明を投稿してください。投稿の品質を向上させるのに役立ち、投票数が増える可能性があります。
— Android
-1 
$("#dropDownId").val('2');
var SelectedValue= $("#dropDownId option:selected").text();
$(".ParentClass .select-value").html(SelectedValue);


<p class="inline-large-label button-height ParentClass" >
     <label for="large-label-2" class="label">Country <span style="color: Red;">*</span><small></small></label>
     <asp:DropDownList runat="server" ID="dropDownId " CssClass="select" Width="200px">          
    </asp:DropDownList>
</p>
— マダシル・イラハド
ソース
-1

これはあなたのために働くはずです 

  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });
— モハメド・ルザイク
ソース
ドロップダウンオプションがプログラムで選択されているとマークされている場合（ドロップダウンを設定するajaxリクエストからなど）.val（）を取得しようとすると、値がnullになります（ソースを調べると、オプションが実際に選択されていることがわかります）。$（ "myDD option：selected"）。val（）は未定義になります。
— MC9000
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.