JQuery получить значение выбранного параметра (не текст, а атрибут «значение»)


156

Хорошо, у меня есть этот код:

<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

И я хотел бы получить значение выбранной опции. Пример: выбран «Вариант 2», и его значение равно «2». «2» - это значение, которое мне нужно получить, а не «вариант 2».


Демонстрационное руководство по получению: freakyjolly.com/… Демонстрационное руководство по настройке freakyjolly.com/… Одиночная и множественная выборка
Code Spy

Ответы:


271

04/2020: исправлен старый ответ

Использование : выбранный псевдо-селектор в выбранных параметрах, а затем используйте функцию .val для получения значения параметра.

$('select[name=selector] option').filter(':selected').val()

Примечание : лучше использовать фильтр, чем использовать :selectedселектор непосредственно в первом запросе.

Если внутри обработчика изменений, вы можете просто использовать this.valueдля получения значения выбранного параметра. Смотрите демо для получения дополнительной информации.

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

Старый ответ:

Редактировать: как уже отмечалось, это не возвращает значение выбранного параметра.

~~ Используйте .val, чтобы получить значение выбранного параметра. Увидеть ниже,

$('select[name=selector]').val()~~

5
Сделайте свой тест:$('select[name=selector]').change(function() { alert($(this).val()); });
KingRider

4
Обратите внимание, что если в выбранной опции не valueуказан атрибут, <option>label</option>будет возвращена метка (т.е. ). Не всегда может быть тем, что вы хотите. Конечно, в большинстве приложений значение указывается.
Czechchnology

115

Я просто хотел поделиться своим опытом

Для меня,

$('#selectorId').val()

вернулся ноль.

Я должен был использовать

$('#selectorId option:selected').val()


1
Был ли это конкретный случай браузера? Разве новейшая версия Chrome не позволяла этого или IE не поддерживал это?
Теодор Солбьорг

1
Это было в новейшей версии Chrome. Может быть, также в Firefox, но не уверен.
Дэвид Торрес

Не уверен, почему $('#selectorId option:selected').val()у меня не получилось. Вместо этого я использовал$('select option:selected').val()
Франциско Кинтеро

1
@Francisco Проблема в том, что $('select option:selected').val()примет значение первого селектора в HTML-коде. Тогда как у $('#selectorId option:selected').val()вас может быть значение селектора, идентификатор которого вы указали. Двойная проверка на опечатки. Вот пример, который показывает то, что я только что сказал: codepen.io/anon/pen/Nqgqyz
Дэвид Торрес


9

Вам нужно добавить идентификатор на ваш выбор. Затем:
$('#selectorID').val()


У меня есть идентификатор, просто забыл добавить его здесь.
n00b

1
Из того, что я прочитал, использование идентификатора в качестве селектора - самый быстрый метод.
Маркус

5

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

$(document).ready(function(){
    var data= $('select').find('option:selected').val();
});

или

var data= $('select').find('option:selected').text();

4

Вы можете использовать jqueryследующим образом

SCRIPT

  $('#IDOfyourdropdown').change(function(){
    alert($(this).val());
  });

Скрипка здесь


2

Для избранных, как это

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option id="0">CHOOSE AN OPTION</option>
   <option id="127">John Doe</option>
   <option id="129" selected>Jane Doe</option>

... вы можете получить идентификатор таким образом:

$('#list-name option:selected').attr('id');

Или вы можете использовать значение вместо этого, и получить его простым способом ...

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option value="0">CHOOSE AN OPTION</option>
   <option value="127">John Doe</option>
   <option value="129" selected>Jane Doe</option>

как это:

$('#list-name').val();

2

Один из моих вариантов не имеет значения: <option>-----</option>. Я пытался использовать, if (!$(this).val()) { .. }но я получал странные результаты. Оказывается, если у вас нет valueатрибута в вашем <option>элементе, он возвращает текст внутри него вместо пустой строки. Если вы не хотите val()возвращать что-либо для вашего варианта, обязательно добавьте value="".


0

Посмотрите на пример:

    <select class="element select small" id="account_name" name="account_name"> 

        <option value="" selected="selected">Please Select</option>           
        <option value="paypal" >Paypal</option>
        <option value="webmoney" >Webmoney</option>

    </select>

 <script type="text/javascript">

        $(document).ready(function(){ 
             $('#account_name').change(function(){
               alert($(this).val());                                                          
             });
        });
 </script>

0
$('#selectorID').val();

ИЛИ

$('select[name=selector]').val();

ИЛИ

$('.class_nam').val();

@FarhadBagherlo «Keep типирование» это не полезно изменить комментарий! Пожалуйста, суммируйте ваши изменения, чтобы читатели истории редактирования понимали, что вы сделали, не проверяя каждый измененный символ. Спасибо!
jpaugh

0

этот код работает очень хорошо для меня: это возвращает значение выбранной опции. $ ( '# Select_id') найти ( 'вариант: выбирается') Вал ();..


0
 $(document ).ready(function() {
    $('select[name=selectorname]').change(function() { 
     alert($(this).val());});
 });

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

@ paper1111 это простые функции. Я могу объяснить, если это необходимо. $ ('select [name = здесь - это имя окна выбора]) .change () - функция означает, что когда мы изменим опцию выбора, будет работать функция. $ (this) .val () - возвращает значение выбранного параметра
Turan Zamanlı

0

Ссылка на источник

Использование JQuery вал () , чтобы ПОЛУЧИТЬ выбранное значение и и текст () ПОЛУЧИТЬ Option Text.

    <select id="myDropDown" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

Изменить событие при выборе выпадающего

        $("#myDropDown").change(function () {

            // Fetching Value
            console.log($(this).val());

            // Fetching Text
            console.log($(this).find('option:selected').text());

            alert('Value: '+$(this).val()+' | Text: '+$(this).find('option:selected').text());
        });

Нажатие кнопки

        $("button").click(function () {

        // Fetching Value
            console.log($("#myDropDown").val());

    // Fetching Text
            console.log($('#myDropDown option:selected').text());

            alert('Value: '+$("#myDropDown").val()+' | Text: '+$('#myDropDown option:selected').text());
        });
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.