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 ви можете отримати вибраний елемент опції, використовуючи
$(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();

Як відключити вибір? в обох варіантах значення можна змінити, використовуючи:

А

Користувач не може взаємодіяти зі спадним меню. І він не знає, які ще варіанти можуть існувати.

$('#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()функцію і для вибраних елементів:

Метод .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>

Для тих, хто дізнався, що найкраща відповідь не працює.

Спробуйте використовувати:

  $( "#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();

щоб отримати вибір із тим самим класом = ім'я, яким ви могли це зробити, і перевірити, чи вибрано варіант вибору.

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

У мене була така ж проблема , і я зрозумів, чому він не працює на моєму випадку
HTML - сторінка була розділена на кілька фрагментів HTML , і я виявив , що у мене є ще одне поле введення , який несе той же ідентифікатор 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>

Ви можете вибрати за допомогою точно вибраної опції: Нижче наведено InternalText

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

У той час як нижче, ви отримаєте цінність.

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