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

391

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

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

и

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

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

  • 3
    Оба из них должны работать. Проблема должна быть где-то еще (например, этот код заключен в $(document).ready(... блок?)
  • 4
    var value = $('#dropDownId:selected').val();
Показать ещё 5 комментариев
Теги:

31 ответ

709
Лучший ответ

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

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

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

$('#dropDownId :selected').text();
Поделиться
  • 9
    Вам нужно место перед :selected .
  • 50
    самый быстрый способ получить текст выбранной опции: $("#dropDownId").children("option").filter(":selected").text()
Показать ещё 7 комментариев
56 
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
    «значение» - это то, чего не хватает большинству кодеров, в то время как объявление элементов и запрос продолжают возвращать текст
19

Попробуйте этот jQuery,

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

или этот javascript,

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

Если вам нужно получить доступ к значению, а не текст, попробуйте использовать метод val() вместо text().

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

Demo1 | Demo2

Поделиться
  • 1
    Еще один, для перевода javascript! Полезно, если вам нужно сделать это in-line ...
  • 0
    не могу сказать почему .. но только этот работал
14

попробуйте это

$("#yourDropdown option:selected").text();
Поделиться
  • 0
    ОП запрашивает выбранное значение. Этот ответ получит текстовое содержание выпадающего списка. Не неправильно, просто не то, что он просил.
12

Я знаю, что это ужасно старый пост, и я, вероятно, должен быть избит за это жалкое воскресение, но я думал, что поделюсь несколькими ОЧЕНЬ полезными небольшими фрагментами JS, которые я использую во всех приложениях в своем арсенале...

Если вы печатаете:

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

стареет, попробуйте добавить эти маленькие crumpets в ваш глобальный файл *.js:

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

и просто напишите soval("#selector"); или sotext("#selector"); вместо этого! Получите еще более приятное, объединив два и вернув объект, содержащий как value, так и text!

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

Это экономит мне массу драгоценного времени, особенно в формах тяжелых приложений!

Поделиться
8

Это будет предупреждать выбранное значение. Код 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>
Поделиться
7

это сделает трюк

$('#dropDownId').val();
Поделиться
3

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

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

Поделиться
3

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

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

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

value: $('#dropDownId').val();
Поделиться
3

Вы указали свой элемент выбора с идентификатором?

<select id='dropDownId'> ...

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

Поделиться
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;
}
Поделиться
2

Или, если вы попытаетесь:

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

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

Поделиться
2

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

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

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

Поделиться
2

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

Поделиться
2

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

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

Он вернет значение выбранного элемента.

Поделиться
1 

	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>
Поделиться
  • 0
    Добавьте некоторые объяснения вместе с вашим кодом.
  • 0
    спасибо .. очень полезно для меня :)
1

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

    var value= $('option:selected', $('#dropDownId')).val();
Поделиться
1

Просто используйте этот

$('#select_id:selected').text();
Поделиться
1 
$("#selector <b>></b> option:selected").val()

или

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

Выше коды хорошо работали для меня

Поделиться
1

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

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

ИЛИ

$('#dropDownId').text();
Поделиться
1 
$("select[id$=dropDownId]").val()
  • попробуйте это
Поделиться
1

Я знаю, что это старый, но я, хотя я обновляю это с более актуальным ответом

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

Я надеюсь, что это поможет

Поделиться
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;
    }
Поделиться
0

это должно работать для вас

  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });
Поделиться
0

Вы можете сделать это с помощью следующего кода.

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

Если вы хотите получить выбранное значение из опций списка выбора. Это сделает свое дело.

$('#dropDownId option:selected').text();
Поделиться
0

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

$(document).ready(function () {
$('#ddlid').on('change', function () {
                var value = $('#ddlid :selected').text();
                alert(value);'
            });
});
Поделиться
0

Попробуйте следующее:

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

 $('#dropDownId option').filter(':selected').val();
Поделиться
0 
$("#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>
Поделиться
  • 0
    На Stack Overflow рекомендуется добавить объяснение того, почему ваше решение должно работать. Для получения дополнительной информации прочитайте, как ответить .
0

Вам нужно сделать так.

$('[id$=dropDownId] option:selected').val();
Поделиться
0

Вы можете использовать любой из них:

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

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

            //OR

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

});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню