JQuery kullanarak bir açılır menü öğesinin seçilen değerini alma

443

JQuery kullanarak bir açılır kutunun seçili değerini nasıl alabilirim?
Kullanmayı denedim

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

ve

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

ancak her ikisi de boş bir dize döndürür.

jquery

— shyam
kaynak

3

Her ikisi de çalışmalı. Sorun başka bir yerde olmalı (örneğin, kod bir $(document).ready(...bloğa sarılmış mı?)

— karim79

4

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

— karınca

2

Hayır - $('#dropDownId').val();seçilen değeri almanın en kısa yoludur.

— karim79

1

@shyam, kimlikler belge için benzersiz olduğundan bu ifadede seçmenize gerek yoktur, etiket adını yalnızca sınıflara atıfta bulunurken kullanmalısınız select#dropDownId option:selected,

— karınca

olası yinelenen seçiniz-> seçeneği etiketinin Index almak nasıl

— Chris Moschini

841

Tek seçili dom öğeleri için, seçili değeri almak için:

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

Seçili metni almak için:

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

— Peter McG
kaynak

11

Daha önce bir yere ihtiyacınız var :selected.

— interjay

53

En hızlı seçilen seçeneğin metni alma yoludur:$("#dropDownId").children("option").filter(":selected").text()

— RickardN

3

keşke .val()ve.text()

— shareef

8

Richard, kodun çok uzun ... okunabilirlik için çok daha özlü olabilir

— PositiveGuy

2

Değişkende saklanan bir DOM referansı olabilir mi? Sonra kullanınjQuery(domVariable).val()

— Allen Linatoc

57

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

İyi çalışmalı, bu örneğe bakın:

$(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!" />

Snippet'i genişlet

— Nick Reeve
kaynak

4

"değer" çoğu kodlayıcıların kaçırdığı şeydir, elemanlar ve sorgu beyan etmek bunun yerine metin döndürmeye devam eder

— Asad

Demoyu buradan kontrol edin freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

— Kod Casus

22

Bu jQuery'yi deneyin,

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

veya bu javascript,

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

Metne değil de değere erişmeniz gerekiyorsa, val()yerine yöntemi kullanmayı deneyin .text() .

Aşağıdaki keman bağlantılarına göz atın.

Demo1 | demo2 dosyası

— Şanslı
kaynak

14

bunu dene

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

— Kvadiyatar
kaynak

OP seçilen değeri istiyor. Bu cevap açılır menünün metin içeriğini alacaktır. Yanlış değil, sadece ne istediğini değil.

— Joshua Dance

12

Bu çok eski bir yazı olduğunu biliyorum ve muhtemelen bu zavallı diriliş için kırbaçlanması gerekir, ama benim cephanelik her uygulama boyunca kullandığım ÇOK yararlı küçük JS parçacıkları birkaç paylaşmak düşündüm ...

Yazarken:

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

yaşlanıyorsa, bu küçük parçaları global *.jsdosyanıza eklemeyi deneyin :

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

ve sadece yaz soval("#selector"); ya da sotext("#selector");onun yerine! İkisini birleştirerek ve hem de valuehem de text!

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

Özellikle form ağır uygulamalarda tonlarca zaman kazandırıyor!

— DevlshOne
kaynak

9

Bu, seçilen değeri uyaracaktır. JQuery Kodu ...

$(document).ready(function () {

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

HTML Kodu...

<select id="myDropDown">
        <option>Milk</option>
        <option>Egg</option>
        <option>Bread</option>
        <option>Fruits</option>
    </select>

— Uthaiah
kaynak

8

bu hile yapacak

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

— Singleton
kaynak

8

Test edilen başka bir örnek:

<!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 Kaygan
kaynak

4

Bunu deneyin, değeri alır:

$('select#myField').find('option:selected').val();

— Rngelo Rigo
kaynak

3

Select öğenize bir kimlik verdiniz mi?

<select id='dropDownId'> ...

İlk ifadeniz işe yarayacak!

— schaechtele
kaynak

3

Seçilen metin kullanımı için:

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

Seçilen değer için:

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

— mahi
kaynak

2

idBu kontrol aşağı damla için oluşturulan gördü htmldinamik olacak biri. Bu yüzden tam kimliği kullanın Çalışacaktır $('ct100_<Your control id>').val()..

— VenkeHV
kaynak

2

Ya da denerseniz:

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

Bugün kullandım ve iyi çalışıyor.

— Katı
kaynak

2

kullanım

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

Bu çalışmalı :)

— Namila
kaynak

2

Açılan jquery değerini almak için sadece gönderilen aşağıdaki işlevi kullanın idve seçilen değeri alın:

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

— Virendra khade
kaynak

Bunu yapmanın zahmetli yolu, ama ne işe yararsa.

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

Snippet'i genişlet

— Sakthi Sudhan
kaynak

1

Bunun eski olduğunu biliyorum ama bunu daha güncel bir cevapla güncellememe rağmen

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

Umarım bu yardımcı olur

— mindmyweb
kaynak

1

$("select[id$=dropDownId]").val()

bunu dene

— rakesh
kaynak

1

bu kodlardan birini kullan

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

VEYA

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

— Bipin
kaynak

1

Bu işe yarıyor

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

— Shittu Joseph Olugbenga
kaynak

1

$("#selector <b>></b> option:selected").val()

Veya

$("#selector <b>></b> option:selected").text()

Yukarıdaki kodlar benim için iyi çalıştı

— Stefan Kelchtermans
kaynak

1

Bunu aşağıdaki kodu kullanarak yapabilirsiniz.

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

Seçilen değeri seçim listesinin seçeneklerinden almak istiyorsanız. Bu hile yapacak.

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

— Dulith De Costa
kaynak

0

Bunlardan herhangi birini kullanabilirsiniz:

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

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

            //OR

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

});

— Suresh Burdak
kaynak

0

Böyle koymalısın.

$('[id$=dropDownId] option:selected').val();

— Arthur Salgado
kaynak

0

Bunu dene:

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

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

— saravanajd
kaynak

0

Sayfa yüklemesinde seçilen değeri elde etmek için aşağıdaki yöntemi kullanın:

$(document).ready(function () {
$('#ddlid').on('change', function () {
                var value = $('#ddlid :selected').text();
                alert(value);`
            });
});

— UTHIRASAMY
kaynak

0

Birden fazla açılır listeniz varsa deneyin:

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
kaynak

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;

— Mehdi Hosseini
kaynak

Lütfen bunun sorunu nasıl ve neden çözdüğünü, yayınınızın kalitesini artırmaya ve muhtemelen daha fazla oylamaya neden olabileceğine dair bir açıklama ekleyin.

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

— Muddassir Irahad
kaynak

-1

bu senin için çalışmalı

  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });

— Muhammed Ruzaik
kaynak

Açılır seçeneğiniz programlı olarak seçildiyse (açılır listeyi dolduran ajax isteğinde olduğu gibi)? Bir .val () elde etmeye çalışırsanız, değer için boş değer alırsınız (kaynağı incelemek size seçeneğin gerçekten seçili olduğunu gösterecektir)! $ ("myDD seçeneği: seçili"). val () tanımsız olarak görüntülenecektir.

— MC9000