Отримайте вибране значення елемента, що випадає, використовуючи jQuery

443

Як я можу отримати вибране значення випадаючого вікна за допомогою jQuery?
Я спробував використовувати

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

і

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

але обидва повертають порожній рядок.

jquery

— шям
джерело

3

І те й інше повинно працювати. Проблема має бути десь іншою (наприклад, цей код загорнутий у $(document).ready(...блок?)

— karim79

4

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

— мураха

2

Нія - $('#dropDownId').val();це найбільш стислий спосіб отримати вибране значення.

— karim79

1

@shyam вам не потрібно вибирати в цьому операторі, оскільки ідентифікатори унікальні для документа, ви повинні використовувати ім'я тегів лише під час перегляду класів select#dropDownId option:selected,

— ant

можливий дублікат Як отримати індекс вибору-> опція тегу

— Кріс Москіні

840

Для окремих вибраних елементів dom, щоб отримати поточне вибране значення:

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

Щоб отримати текст, який ви вибрали на даний момент:

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

— Пітер Макг
джерело

11

Вам потрібен пробіл раніше :selected.

— interjay

53

швидкий спосіб отримати текст обраної опції:$("#dropDownId").children("option").filter(":selected").text()

— RickardN

3

Я хочу, щоб у вас були посилання на .val()та.text()

— shareef

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

"value" - це те, що пропускає більшість кодерів, а декларування елементів та запитів продовжує повертати текст натомість

— 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();

— Квадіятар
джерело

OP задає вибране значення. Ця відповідь отримає зміст тексту, що випадає. Не помиляюся, просто не те, про що він просив.

— Танець Джошуа

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>

— Утайя
джерело

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>

— J Slick
джерело

4

Спробуйте це, воно отримує значення:

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

— Інгело Ріго
джерело

3

Ви постачали елементу вибору свій ідентифікатор?

<select id='dropDownId'> ...

Ваша перша заява має спрацювати!

— schaechtele
джерело

3

Для вибраного використання тексту:

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

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

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

— махі
джерело

2

id, Який отримав для ваших спадаючого контролю в htmlбуде динамічним. Тож використовуйте повний id $('ct100_<Your control id>').val().Це спрацює.

— VenkeHV
джерело

2

Або якщо ви спробуєте:

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

Я використовував це сьогодні, і він працює чудово.

— SoLiD
джерело

2

використання

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

Це має працювати :)

— Наміла
джерело

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>

Розгорніть фрагмент

— sakthi sudhan
джерело

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

— Біпін
джерело

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);`
            });
});

— УТІРАЗАМІЯ
джерело

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);
  });

— mohamed ruzaik
джерело

Що робити, якщо ваш параметр, що випадає, був позначений як програмно вибраний (наприклад, із запиту ajax, який заповнює спадне меню)? Якщо ви спробуєте отримати .val (), ви отримаєте null для значення (навіть незважаючи на те, що перевірка джерела покаже вам, що параметр дійсно обраний)! $ ("параметр myDD: вибрано"). val () дасть не визначений.

— MC9000