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

Question

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

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

Я пробовал использовать

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

и

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

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

359 28

jQuery

28 ответов:

Comments

Ничего не найдено.

Peter McG · Accepted Answer · 2010-05-06 23:35:23

для отдельных элементов select dom, чтобы получить текущее выбранное значение:
$('#dropDownId').val();
чтобы получить выделенный текст:
$('#dropDownId :selected').text();

Nick Reeve · Accepted Answer · 2015-07-01 08:48:16

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

Lucky · Accepted Answer · 2015-09-02 09:28:15

попробуйте этот jQuery,
$("#ddlid option:selected").text();
или это javascript,
 var selID=document.getElementById("ddlid");
 var text=selID.options[selID.selectedIndex].text;
Если вам нужно получить доступ к значению, а не к тексту, попробуйте использовать val() вместо text().

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

Demo1/Demo2

Kvadiyatar · Accepted Answer · 2013-03-12 12:32:56

попробуй такое
$("#yourDropdown option:selected").text();

DevlshOne · Accepted Answer · 2014-05-09 01:22:10

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

при вводе:
$("#selector option:selected").val() // or
$("#selector option:selected").text()
стареет, попробуйте добавить эти маленькие пышки в свой глобальный *.js file:
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;
}
это экономит мне массу драгоценного времени, особенно на виде тяжелых приложений!

J Slick · Accepted Answer · 2013-10-11 22:55:29

еще один проверенный пример:

<!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">-00</option>
<option value="2">-00</option>
<option value="3"></option>
<option value="4"></option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>

Singleton · Accepted Answer · 2013-03-03 09:12:03

это будет делать трюк
$('#dropDownId').val();

Uthaiah · Accepted Answer · 2014-05-23 08:51:11

это предупредит выбранное значение. Код 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>

schaechtele · Accepted Answer · 2010-05-06 14:15:18

вы предоставили свой select-element с идентификатором?
<select id='dropDownId'> ...
ваше первое утверждение должно работать!

mahi · Accepted Answer · 2016-01-19 02:17:58

для выделенного текста используйте:
value: $('#dropDownId :selected').text();
для выбранного значения используйте:
value: $('#dropDownId').val();

Ângelo Rigo · Accepted Answer · 2017-02-15 20:25:48

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

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

VenkeHV · Accepted Answer · 2013-07-03 11:23:12

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

SoLiD · Accepted Answer · 2014-08-22 16:28:38

или если вы попробуете:
$("#foo").find("select[name=bar]").val();
я использовал его сегодня, и он работает нормально.

Namila · Accepted Answer · 2015-10-23 13:01:25

использовать
$('#dropDownId').find('option:selected').val()
Это должно работать :)

Virendra khade · Accepted Answer · 2016-09-13 10:34:31

чтобы получить значение 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;
}

mindmyweb · Accepted Answer · 2014-02-22 08:44:53

Я знаю, что это старый, но я, хотя я обновляю это с более современным ответом
$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
 alert(prepMin);
});
надеюсь, это поможет

rakesh · Accepted Answer · 2014-03-14 08:34:42

$("select[id$=dropDownId]").val()
попробуй такое

Bipin · Accepted Answer · 2014-04-18 12:12:37

используйте один из этих кодов
$('#dropDownId :selected').text();
или
$('#dropDownId').text();

Shittu Joseph Olugbenga · Accepted Answer · 2015-10-28 14:06:09

вот что работает

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

Stefan Kelchtermans · Accepted Answer · 2016-12-09 15:23:28

$("#selector <b>></b> option:selected").val()
или
$("#selector <b>></b> option:selected").text()
выше коды работали хорошо для меня

Suresh Burdak · Accepted Answer · 2016-04-12 15:47:55

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

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

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

            //OR

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

});

Arthur Salgado · Accepted Answer · 2017-02-15 20:05:05

вам нужно поставить вот так.
$('[id$=dropDownId] option:selected').val();

saravanajd · Accepted Answer · 2017-10-25 13:08:24

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

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

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

UTHIRASAMY · Accepted Answer · 2017-12-30 11:29:44

используйте метод ниже, чтобы получить выбранное значение при загрузке страницы:
$(document).ready(function () {
$('#ddlid').on('change', function () {
                var value = $('#ddlid :selected').text();
                alert(value);`
            });
});

Dulith De Cozta · Accepted Answer · 2018-05-16 15:13:06

вы можете сделать это с помощью следующего кода.
$('#dropDownId').val();
Если вы хотите получить выбранное значение из вариантов выбора списка. Это будет делать трюк.
$('#dropDownId option:selected').text();

sakthi sudhan · Accepted Answer · 2018-09-29 12:35:53

	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>

Muddassir Irahad · Accepted Answer · 2018-02-08 06:44:48

$("#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>

mohamed ruzaik · Accepted Answer · 2018-05-27 19:47:36

это должно работать для вас
  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });