Uzyskaj wybraną wartość elementu rozwijanego za pomocą jQuery

443

Jak mogę uzyskać wybraną wartość listy rozwijanej za pomocą jQuery?
Próbowałem użyć

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

i

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

ale oba zwracają pusty ciąg.

jquery shyam
źródło

3

Oba powinny działać. Problem musi być gdzie indziej (np. Czy kod jest zawinięty w $(document).ready(...blok?)

karim79

4

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

mrówka

2

Nie - $('#dropDownId').val();jest najbardziej zwięzłym sposobem uzyskania wybranej wartości.

karim79

1

@shyam nie trzeba wybrać w tym stwierdzeniem, ponieważ Identyfikatory są unikalne dla dokumentu, należy użyć nazwy zmiennej tylko wtedy, gdy odnosząc się do zajęć select#dropDownId option:selected,

mrówka

możliwy duplikat Jak uzyskać indeks tagu opcji select->

Chris Moschini

840

W przypadku elementów pojedynczego wyboru domeny, aby uzyskać aktualnie wybraną wartość:

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

Aby uzyskać aktualnie zaznaczony tekst:

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

Peter McG
źródło

11

Potrzebujesz wcześniej miejsca :selected.

interjay

53

najszybszy sposób na uzyskanie tekstu wybranej opcji jest:$("#dropDownId").children("option").filter(":selected").text()

RickardN

3

Chciałbym, żebyś powiązał odniesienia do .val()i.text()

shareef

8

Richard, twój kod jest za długi ... dla czytelności może być bardziej zwięzły

PositiveGuy

2

@ JamesM. Czy odwołanie do DOM jest przechowywane w zmiennej? Następnie użyjjQuery(domVariable).val()

Allen Linatoc

57

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

Powinien działać dobrze, zobacz ten przykład:

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

Rozwiń fragment kodu

Nick Reeve
źródło

4

„wartość” jest tym, czego brakuje większości programistów, podczas gdy deklarowanie elementów i zapytania wciąż zwraca tekst

Asad

Sprawdź demo tutaj freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

Spy Code

22

Wypróbuj jQuery,

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

lub ten javascript,

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

Jeśli potrzebujesz dostępu do wartości, a nie tekstu, spróbuj użyć val()metody zamiast text().

Sprawdź poniższe linki do skrzypiec.

Demo1 | Demo2

szczęścia
źródło

14

Spróbuj tego

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

Kvadiyatar
źródło

OP prosi o wybraną wartość. Ta odpowiedź dostałaby zawartość tekstową menu rozwijanego. Nie źle, tylko nie to, o co prosił.

Joshua Dance

12

Wiem, że to strasznie stary post i prawdopodobnie powinienem zostać wychłostany za to żałosne zmartwychwstanie, ale pomyślałem, że podzielę się kilkoma BARDZO pomocnymi krótkimi fragmentami JS, których używam podczas każdej aplikacji w moim arsenale ...

Jeśli piszesz:

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

się starzeje, spróbuj dodać te małe crumpets do *.jspliku globalnego :

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

i po prostu napisz soval("#selector");lub sotext("#selector");zamiast! Dostać nawet amator łącząc dwa i powrocie przedmiot zawierający zarówno valuea text!

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

Oszczędza mi to mnóstwo cennego czasu, szczególnie w aplikacjach o dużej gramaturze!

DevlshOne
źródło

9

Zaalarmuje to wybraną wartość. Kod JQuery ...

$(document).ready(function () {

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

Kod HTML...

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

Uthaiah
źródło

8

to załatwi sprawę

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

Singel
źródło

8

Jeszcze inny przetestowany przykład:

<!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 Slick
źródło

4

Spróbuj tego, uzyska wartość:

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

Angelo Rigo
źródło

3

Czy podałeś swój element select z identyfikatorem?

<select id='dropDownId'> ...

Twoje pierwsze zdanie powinno działać!

schaechtele
źródło

3

Dla wybranego tekstu użyj:

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

Dla wybranej wartości użyj:

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

mahi
źródło

2

To, idco zostało wygenerowane dla twojej rozwijanej kontroli w, htmlbędzie dynamiczne. Więc użyj pełnego identyfikatora $('ct100_<Your control id>').val().To zadziała.

VenkeHV
źródło

2

Lub jeśli spróbujesz:

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

Użyłem go dzisiaj i działa dobrze.

Solidny
źródło

2

posługiwać się

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

To powinno działać :)

Namila
źródło

2

Aby uzyskać wartość jquery z listy rozwijanej, wystarczy użyć poniższej funkcji właśnie wysłanej idi uzyskać wybraną wartość:

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
źródło

Ciężki sposób na zrobienie tego, ale cokolwiek działa.

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>

Rozwiń fragment kodu

sakthi sudhan
źródło

1

Wiem, że to jest stare, ale myślę, że aktualizuję to z bardziej aktualną odpowiedzią

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

mam nadzieję, że to pomoże

mindmyweb
źródło

1

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

Spróbuj tego

rakesh
źródło

1

użyj jednego z tych kodów

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

LUB

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

Bipin
źródło

1

To działa

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

Shittu Joseph Olugbenga
źródło

1

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

Lub

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

Powyższe kody działały dla mnie dobrze

Stefan Kelchtermans
źródło

1

Możesz to zrobić za pomocą następującego kodu.

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

Jeśli chcesz uzyskać wybraną wartość z opcji listy wyboru. To załatwi sprawę.

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

Dulith De Costa
źródło

0

Możesz użyć dowolnego z tych:

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

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

            //OR

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

});

Suresh Burdak
źródło

0

Musisz to tak ułożyć.

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

Arthur Salgado
źródło

0

Spróbuj tego:

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

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

saravanajd
źródło

0

Użyj poniższej metody, aby uzyskać wybraną wartość przy ładowaniu strony:

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

UTHIRASAMY
źródło

0

Jeśli masz więcej niż jedną listę rozwijaną, spróbuj:

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
źródło

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;

Mahdi Hosseini
źródło

Dołącz wyjaśnienie, w jaki sposób i dlaczego to rozwiązuje problem, naprawdę pomógłby poprawić jakość twojego postu i prawdopodobnie doprowadziłby do większej liczby głosów pozytywnych.

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
źródło

-1

to powinno Ci pomóc

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

mohamed ruzaik
źródło

Co się stanie, jeśli twoja opcja rozwijana została oznaczona jako wybrana programowo (np. Z żądania ajax wypełniającego menu rozwijane)? Jeśli spróbujesz uzyskać .val (), otrzymasz wartość null dla wartości (nawet jeśli sprawdzenie źródła pokaże, że opcja jest rzeczywiście wybrana)! $ („opcja myDD: wybrana”). val () da niezdefiniowane.

MC9000,

Uzyskaj wybraną wartość elementu rozwijanego za pomocą jQuery

Odpowiedzi: