Получить выбранное значение элемента раскрывающегося списка с помощью jQuery

443

Как я могу получить выбранное значение раскрывающегося списка, используя jQuery?
Я пытался с помощью

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

а также

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

но оба возвращают пустую строку.

jquery

— Shyam
источник

3

Оба из них должны работать. Проблема должна быть где-то еще (например, этот код заключен в $(document).ready(...блок?)

— karim79

4

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

— Муравей

2

Нет - $('#dropDownId').val();это самый лаконичный способ получить выбранное значение.

— karim79

1

@shyam вам не нужно выбирать в этом утверждении, так как идентификаторы уникальны для документа, вы должны использовать имя тега только при обращении к классам select#dropDownId option:selected,

— ant

Возможный дубликат Как получить индекс тега выбора-> вариант

— Крис Москини,

841

Для отдельных элементов dom выберите текущее выбранное значение:

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

Чтобы получить текущий выбранный текст:

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

— Питер МакГ
источник

11

Вам нужно место раньше :selected.

— interjay

53

самый быстрый способ получить текст выбранного варианта:$("#dropDownId").children("option").filter(":selected").text()

— RickardN

3

Я хотел бы, чтобы вы имели ссылки на .val()и.text()

— Шариф

8

Ричард, ваш код слишком длинный ... он может быть гораздо более кратким для удобства чтения

— PositiveGuy

2

@ JamesM.Сложить ссылку на DOM, хранящуюся в переменной? Тогда используйтеjQuery(domVariable).val()

— Аллен Линаток

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

Проверьте ниже ссылки скрипки.

Демо1 | Demo2

— повезло
источник

14

попробуй это

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

— Kvadiyatar
источник

ОП запрашивает выбранное значение. Этот ответ получит текстовое содержание выпадающего списка. Не неправильно, просто не то, что он просил.

— Джошуа Дэнс

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");взамен! Добейтесь еще большего воображения, комбинируя два и возвращая объект, содержащий и the, 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>

— Uthaiah
источник

8

это сделает свое дело

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

— одиночка
источник

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>

— Дж Слик
источник

4

Попробуйте это, он получает значение:

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

— Анджело Риго
источник

3

Вы предоставили свой элемент select с идентификатором?

<select id='dropDownId'> ...

Ваше первое заявление должно сработать!

— schaechtele
источник

3

Для выбранного текста используйте:

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

Для выбранного значения используйте:

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

— махи
источник

2

id, Который получил для ваших ниспадающего контроля в htmlбудет динамичным. Так что используйте полный идентификатор, $('ct100_<Your control id>').val().он будет работать.

— VenkeHV
источник

2

Или если вы попробуете:

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

Я использовал это сегодня, и он работает нормально.

— твердый
источник

2

использование

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

Это должно работать :)

— Namila
источник

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

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

попробуй это

— Ракеш
источник

1

используйте любой из этих кодов

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

ИЛИ

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

— Bipin
источник

1

Это то что работает

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

— Ситту Джозеф Олугбенга
источник

1

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

Или

$("#selector <b>></b> option:selected").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

Вы должны положить как это.

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

— Артур Сальгадо
источник

0

Попробуй это:

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

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

— saravanajd
источник

0

Используйте метод ниже, чтобы получить выбранное значение при загрузке страницы:

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

— UTHIRASAMY
источник

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 (), вы получите нулевое значение (хотя проверка источника покажет вам, что опция действительно выбрана)! $ («опция myDD: selected»). val () выдаст неопределенное значение.

— MC9000