Получить выбранное значение элемента раскрывающегося списка с помощью jQuery
Как я могу получить выбранное значение из выпадающего списка с помощью jQuery?
Я пробовал использовать
var value = $('#dropDownId').val();
и
var value = $('select#dropDownId option:selected').val();
но оба возвращают пустую строку.
28 ответов
для отдельных элементов select dom, чтобы получить текущее выбранное значение:
$('#dropDownId').val();
чтобы получить выбранный текст:
$('#dropDownId :selected').text();
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!" />
попробуйте этот jQuery,
$("#ddlid option:selected").text();
или этот javascript,
var selID=document.getElementById("ddlid");
var text=selID.options[selID.selectedIndex].text;
Если вам нужно получить доступ к значению, а не текст, тогда попробуйте использовать val()
вместо text()
.
Проверьте ссылки ниже скрипки.
Я знаю, что это ужасно старый пост, и меня, вероятно, следует выпороть за это жалкое воскрешение, но я думал, что поделюсь парой очень полезных маленьких фрагментов JS, которые я использую во всех приложениях в моем арсенале...
если вводить:
$("#selector option:selected").val() // or
$("#selector option:selected").text()
стареет, попробуйте добавить эти маленькие лепешки в свой глобальный :
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;
}
это экономит мне массу драгоценного времени, особенно на тяжелых приложениях!
еще один проверенный пример:
<!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>
это предупредит выбранное значение. Код 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>
вы предоставили свой select-element с идентификатором?
<select id='dropDownId'> ...
ваше первое утверждение должно работать!
для выбранного текста используйте:
value: $('#dropDownId :selected').text();
для выбранного значения используйте:
value: $('#dropDownId').val();
на id
, который был создан для вашего выпадающего элемента управления в html
будет динамичным. Поэтому используйте полный id $('ct100_<Your control id>').val().
Он будет работать.
или если вы попытаетесь:
$("#foo").find("select[name=bar]").val();
я использовал его сегодня, и он работает нормально.
чтобы получить значение 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;
}
Я знаю, что это старый, но я, хотя я обновляю это с более современным ответом
$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
alert(prepMin);
});
надеюсь, это поможет
$("#selector <b>></b> option:selected").val()
или
$("#selector <b>></b> option:selected").text()
выше коды работали хорошо для меня
вы можете использовать любой из этих:
$(document).on('change', 'select#dropDownId', function(){
var value = $('select#dropDownId option:selected').text();
//OR
var value = $(this).val();
});
попробуйте это:
$('#dropDownId option').filter(':selected').text();
$('#dropDownId option').filter(':selected').val();
используйте метод ниже, чтобы получить выбранное значение при загрузке страницы:
$(document).ready(function () {
$('#ddlid').on('change', function () {
var value = $('#ddlid :selected').text();
alert(value);`
});
});
Вы можете сделать это, используя следующий код.
$('#dropDownId').val();
Если вы хотите получить выбранное значение из вариантов выбора списка. Это поможет.
$('#dropDownId option:selected').text();
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>
$("#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>
это должно работать для вас
$("#dropDownId").on('change',function(){
var value=$(this).val();
alert(value);
});