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

Ответ 1

В раскрывающемся списке вы, вероятно, хотите что-то вроде этого:

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

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

Ответ 2

Задайте значения для каждой из опций

<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 voodoo, предлагаемого другими.

Ответ 3

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

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

или в целом:

$('#id :pseudoclass')

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

Ответ 4

Попробуйте это для значения...

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

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

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

Ответ 5

Если вы находитесь в контексте событий, в jQuery вы можете получить выбранный элемент элемента, используя:
$(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
});

Edit

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

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

Ответ 6

Считаете ли вы использование простого старого javascript?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

См. также Получение текста/значения опции с помощью JavaScript

Ответ 7

$('#aioConceptName option:selected').val();

Ответ 8

<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>

Ответ 9

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

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

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

А

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

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

В

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

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

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

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

Из кода позади вы можете обновить значение в своем выборе. Он отключается только для пользователей:

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

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

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

Ответ 10

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

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

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

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

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

Ответ 11

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

Метод .val() в основном используется для получения значений элементов формы таких как ввод, выбор и текстовое поле. В случае выбранных элементов это возвращает 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>

Ответ 12

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

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

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

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

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

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

Ответ 13

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

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

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

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

Ответ 14

Только это должно работать:

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

Ответ 15

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

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

Ответ 16

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

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

Ответ 17

Я надеюсь, что это также поможет лучше понять и поможет попробуйте это ниже, $('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/

Ответ 18

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

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

Ответ 19

Прямо вперед и довольно легко:

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

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

Ответ 20

Вы можете использовать $("#drpList").val();

Ответ 21

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

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

Ответ 22

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

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

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

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

Ответ 23

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

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

Ответ 24

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

Ответ 25

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

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

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

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

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

Ответ 26

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

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

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

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

Например => я выбрал этот тег:

<div id="id_Of_Parent_Selected_Tag">
<select >
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
    </select>
</div>
<script>
 $('#id_Of_Parent_Selected_Tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#id_Of_Parent_Selected_Tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

Ответ 27

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

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

Ответ 28

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

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

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

   //perform the rest of your operations using aforementioned var

});

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

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