it-swarm.com.ru

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>
974
William Kinaan

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

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

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

1640
Elliot Bonneville

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

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

303
Jacob Valenta

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

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

или в общем:

$('#id :pseudoclass')

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

149
Ed Orsi

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

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

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

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

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

44
JoDev

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

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

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

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

29
Roonaan
$('#aioConceptName option:selected').val();
17
wild_nothing

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

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

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

A

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

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

B

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

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

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

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

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

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

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

$("#Status").val(2).change();
11
profimedica
<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>
11
Ol Sen

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

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

9
Salman A

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

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

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

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

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

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

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

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

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

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

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

8
D.L.MAN

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

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

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

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

8
user2709153

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

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

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

2
Vijayaragavan

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

$(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
Haris Sultan

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

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

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

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

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

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

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

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

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

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

0
Author PraWin

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

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

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

$("select#aioConceptName > option:selected").val()
0
Hafiz Shehbaz Ali
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

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

0
Satista

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

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

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

0
Hasnaa Ibraheem

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

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

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

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

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

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

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

0
Yusuf Azan