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

Обычно я использую, $("#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>

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

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

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

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

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

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

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

или в общем:

$('#id :pseudoclass')

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

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

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

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

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

Если вы находитесь в контексте события, в 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().

Рассматривали ли вы использовать старый добрый javascript?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используйте 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>

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

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

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

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

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

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

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

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

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

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

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

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

 $('#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>

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

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

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

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

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

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

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

$('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/

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

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

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

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

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

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

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

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

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

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

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

Вероятно, лучшая ставка для такого сценария - использовать метод изменения 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

});

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

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

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

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

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

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

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

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