JQuery Получить выбранный вариант из выпадающего


1128

Обычно я использую, $("#id").val()чтобы вернуть значение выбранного параметра, но на этот раз он не работает. Выбранный тег имеет идентификаторaioConceptName

HTML-код

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

2
не могли бы вы показать разметку элемента#aioConceptName
Хорхе

2
это странно, потому что работает на этом примере jsfiddle.net/pAtVP , вы уверены, что событие, которое он запускает в вашей среде?
Хорхе


11
Запоздалая мысль, но .val () не сработает, если вы не установите valueатрибут для этих <option>s, верно?
Джейкоб Валента,

8
Последние версии jQuery (протестированные с 1.9.1) не имеют проблем с этой разметкой. Для приведенного выше примера $("#aioConceptName").val()возвращает choose io.
Салман А

Ответы:


1847

Для выпадающих опций вы, вероятно, хотите что-то вроде этого

var conceptName = $('#aioConceptName').find(":selected").text();

Причина val()не в том, что щелчок параметра не меняет значение раскрывающегося списка - он просто добавляет :selectedсвойство к выбранному параметру, который является дочерним элементом раскрывающегося списка.


41
Ах, хорошо, вы обновили свой вопрос с помощью HTML. Этот ответ сейчас не имеет значения. На самом деле, .val()должно работать в вашем случае - вы должны иметь ошибку в другом месте.
Эллиот Бонневиль

13
для val()почему бы не использовать var conceptVal = $("#aioConceptName option").filter(":selected").val();?
Тестер

61
Как насчет проще var conceptVal = $("#aioConceptName option:selected").val()?
Клемен Тушар

5
Я все еще находил это полезным для поиска выбранной опции в выборе, где я получил раскрывающийся список ранее - например, var mySelect = $('#mySelect'); / * ... больше кода происходит ... * / var selectedText = mySelect.find(':selected').text();
Чарльз Вуд

18
На самом деле причина .val () для него не работает в том, что он на самом деле не дал своим опциям значение, поэтому он должен использовать ваш метод для извлечения выделенного текста, поэтому другое исправление было бы изменить <option> выберите io </ option>, чтобы <option value = 'выбрать io'> выберите io </ option> Хотя ваше решение, вероятно, более быстрое и практичное, я решил, что в любом случае я бы это сказал, чтобы он лучше понимал почему это не работает для него.
Джордан Лаприз

342

Установите значения для каждого из параметров

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val() не работал, потому что .val() возвращает valueатрибут. Чтобы он работал правильно, valueатрибуты должны быть установлены на каждом<option> .

Теперь вы можете звонить $('#aioConceptName').val()вместо всего этого :selectedвуду, предложенного другими.


12
Предостережение: если не выбрана ни одна опция, $('#aioConceptName').val()возвращает null / "undefined"
Гордон

Это заверило меня, что $ ('# myselect'). Val () был верен, я просто тупо забыл дать идентификатору select!
zzapper

4
Одна из моих опций выбора - это специальная promptопция <option>Please select an option</option>. В моем случае не было проблемой добавить пустой атрибут value, <option value="">Please...</option>но я считаю, что в некоторых случаях отсутствие атрибута value имеет смысл. Но +1, потому что твоя формулировка vodoo заставила меня улыбнуться.
Кирилл Дюшон-Дорис

Не val()выделять valueвместо текста внутри option? Т.е. он выбирает 1вместо roma.
Deathlock

4
@deathlock В этом весь смысл .val(). Если вы хотите манипулировать / использовать текст, используйте $(":selected).text()или установите значение и текст одинаковыми.
Джейкоб Валента

162

Я наткнулся на этот вопрос и разработал более краткую версию ответа Эллиота Бонневиля:

var conceptName = $('#aioConceptName :selected').text();

или в общем:

$('#id :pseudoclass')

Это экономит вам дополнительный вызов jQuery, выбирает все в одном кадре и является более понятным (мое мнение).


1
@JohnConde Принятый ответ на Meta не согласен с вами: meta.stackexchange.com/questions/87678/… . По моему мнению, Эд дал хороший ответ и только что дал дополнительную ссылку.
Брюс

Они могут позволить это, но это все еще плохой ресурс
Джон Конде

1
Удалена ссылка на w3schools, в этом нет особой необходимости, и поиск в Google по запросу «jQuery pseduo classes» предоставляет много информации.
Эд Орси

@EdOrsi: хотя он и сохраняет дополнительный вызов jQuery, он не позволяет воспользоваться преимуществами повышения производительности, обеспечиваемыми собственным querySelectorAll()методом DOM (см. Документацию jQuery ). Таким образом, это должно быть медленнее, чем решение Элиота .
Александр Абакумов

Я, вероятно, предпочел бы использовать, .find(':selected')поскольку тогда он позволяет вам вызывать его с помощью обратного вызова, прикрепленного к событию ... например$('#aioConceptname').bind('change', function(el) { console.log ( $(el).find(':selected').text() ); });
Armstrongest

58

Попробуйте это для ценности ...

$("select#id_of_select_element option").filter(":selected").val();

или это для текста ...

$("select#id_of_select_element option").filter(":selected").text();

49

Если вы находитесь в контексте события, в jQuery вы можете извлечь выбранный элемент option, используя:
$(this).find('option:selected')например:

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

редактировать

Как уже упоминалось PossessWithin , на мой ответ просто отвечу на вопрос: как выбрать выбранный «вариант».

Далее, чтобы получить значение параметра, используйте option.val().


2
Безупречный! Только не забудьте, что вы должны добавить $(this).find('option:selected').val()в конце, чтобы получить значение элемента option или $(this).find('option:selected').text()получить текст. :)
Диего Фортес



16

Чтение значения (не текста) выбора:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

Как отключить выбор? в обоих вариантах значение можно изменить с помощью:

A

Пользователь не может взаимодействовать с выпадающим. И он не знает, какие существуют другие варианты.

$('#Status').prop('disabled', true);

В

Пользователь может видеть параметры в раскрывающемся списке, но все они отключены:

$('#Status option').attr('disabled', true);

В этом случае $("#Status").val() будет работать только для версий JQuery меньше, чем1.9.0 . Все остальные варианты будут работать.

Как обновить отключенный выбор?

Исходя из кода, вы все еще можете обновить значение по вашему выбору. Это отключено только для пользователей:

$("#Status").val(2);

В некоторых случаях вам может понадобиться запустить события:

$("#Status").val(2).change();

11
<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>

:) хорошо то, что :selectedval () или text () не работают корректно для нескольких опций выбора, только если какой-то массив создается из него, как это map()можно было бы сделать.
Ол Сен

10

Вы должны использовать этот синтаксис:

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

Так что попробуйте этот код:

var values = $('#aioConceptName :selected').val();

Вы можете проверить в Fiddle: http://jsfiddle.net/PJT6r/9/

см об этом ответе в этом посте


9

Используя jQuery, просто добавьте changeсобытие и получите выбранное значение или текст в этом обработчике.

Если вам нужен выделенный текст, используйте этот код:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

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

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});

9

Используйте jQuery.val()функцию и для элементов select:

Метод .val () в основном используется для получения значений элементов формы, таких как input, select и textarea. В случае элементов select он возвращается, nullкогда ни один параметр не выбран, и массив, содержащий значение каждого выбранного параметра, когда есть хотя бы один, и можно выбрать больше, потому что multipleатрибут присутствует.

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>


8

Для тех, кто узнал, что лучший ответ не работает.

Попробуй использовать:

  $( "#aioConceptName option:selected" ).attr("value");

У меня работает в последних проектах, так что стоит посмотреть на это.


7

Просто это должно работать:

var conceptName = $('#aioConceptName').val();

6

Прямо и довольно просто:

Ваш выпадающий

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Код Jquery для получения выбранного значения

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});

4

Вы можете попробовать отладить это так:

console.log($('#aioConceptName option:selected').val())

4

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

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

И если вы хотите получить текст, используйте этот код:

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

Например:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

2

Если вы хотите получить атрибут 'value' вместо текстового узла, это будет работать для вас:

var conceptName = $('#aioConceptName').find(":selected").attr('value');

Это только частичное решение - необходимо также установить значение для каждого параметра - это уже покрыто ответом Джейкоба Валетты
Дэвид

2

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

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

2
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

Представьте себе DDL как массив с индексами, вы выбираете один индекс. Выберите тот, который вы хотите установить с вашим JS.


2

Я надеюсь, что это также помогает лучше понять и помогает попробовать это ниже,

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

для более подробной информации, пожалуйста, http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/



1

чтобы получить выборку с тем же именем class = name, вы можете сделать это, чтобы проверить, выбрана ли опция выбора.

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});

1

У меня была та же проблема, и я выяснил, почему она не работает в моем случае
. HTML-страница была разделена на различные HTML-фрагменты, и я обнаружил, что у меня есть другое поле ввода, которое содержит тот же Id select, что и val()всегда было пустым
Я надеюсь, что это спасет день для тех, у кого есть подобные проблемы.


Действительно, это разбудило меня к моей проблеме. Я сам использовал qty-field в data-target и .. qty_field в самом id. Всегда проверяйте основы дважды или более.
cdsaenz

1

чтобы использовать $ ("# id"). val, вы должны добавить значение к опции, например:

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>
</select>

иначе, вы можете использовать

   $("#aioConceptName").find(':selected').text();

Я хочу, чтобы это помогло ..


1

Вот простое решение этой проблемы.

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

1
var selectedaioConceptName = $('#aioConceptName option:selected').val();лучше, чем использовать другую находку ()
Sadee

0

Вероятно, лучшая ставка для такого сценария - использовать метод изменения jQuery, чтобы найти текущее выбранное значение, например:

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

Я предпочитаю этот метод, потому что вы можете выполнять функции для каждого выбранного параметра в данном поле выбора.

Надеюсь, это поможет!


0

Обычно вам нужно не только получить выбранное значение, но и выполнить какое-либо действие. Так почему бы не избежать всей магии jQuery и просто передать выбранное значение в качестве аргумента для вызова действия?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>

0

Вы можете выбрать, используя точно выбранную опцию: ниже приведу innerText

$("select#aioConceptName > option:selected").text()

Хотя ниже даст вам ценность.

$("select#aioConceptName > option:selected").val()
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.