Как получить все варианты выбора, используя jQuery?

407

Как я могу получить все параметры выбора через jQuery, передав его идентификатор?

Я только ищу их значения, а не текст.

Нажмите Upvote
источник

Ответы:

613

Использование:

$("#id option").each(function()
{
    // Add $(this).val() to your list
});

.each () | Документация по jQuery API

YBO
источник
63
Ни одна из операций JavaScript не требует jQuery. JQuery является вопросом выбора для упрощения операций JS.
рутер
8
Вы также можете сделать: $ ("# id option"). each (function (name, val) {var opt = val.text;});
Кофифус
3
$.mapгораздо более элегантный и менее подвержен ошибкам (см. ниже).
Эллиот Кэмерон
1
$('#id option').map((index, option) => option.value): обратите внимание, как обратная сигнатура обратного вызова по сравнению с «ванильной» mapфункцией JS ( (item, index) =>)
imrok
168

Я не знаю jQuery, но я знаю, что если вы получаете элемент select, он содержит объект 'options'.

var myOpts = document.getElementById('yourselect').options;
alert(myOpts[0].value) //=> Value of the first option
KooiInc
источник
74
+1. Не прибегайте к сложному волшебству селектора jQuery для вещей, которые уже имеют достаточно эффективные реализации, встроенные в простой старый DOM.
bobince
19
Почему бы и нет, @bobince? Если вы в основном используете jQuery, это быстрее и с меньшим количеством кода, который нужно написать, и быстрее, чтобы не пытаться понять, следует ли вам переключиться на обычный javascript в этом случае. И ваш код более последовательный.
Андрей
139

$.map вероятно, самый эффективный способ сделать это.

var options = $('#selectBox option');

var values = $.map(options ,function(option) {
    return option.value;
});

Вы можете добавить параметры изменения, $('#selectBox option:selected')если хотите, чтобы они были выбраны.

Первая строка выбирает все флажки и помещает их элемент jQuery в переменную. Затем мы используем .mapфункцию jQuery, чтобы применить функцию к каждому из элементов этой переменной; все, что мы делаем, это возвращаем значение каждого элемента, так как это все, что нас волнует. Поскольку мы возвращаем их внутри функции map, фактически создается массив значений в соответствии с запросом.

PCasagrande
источник
3
Это самое элегантное решение ИМО. Карта - очень мощная конструкция, которая подходит именно для этой ситуации.
Хазерд
1
Мне очень нравится ваше решение - это подход, с которым я пошел. Однако, если вы просто хотите выбрать выбранные значения, это еще более тривиально: $('#selectBox').val()вернет массив выбранных значений.
whoisthemachine
Привет, @PCasagrande У меня есть имя пользовательского атрибута «тип данных». Как я могу получить ценность этого, используя ваше решение? То, что я делаю, это 'option.data-type', но это дает мне NaN. Заранее спасибо.
Me_developer
Привет, @PCasagrande Я получил то, что мне было нужно, выполнив '$ (option, this) .attr ("data-type") ". Но если у вас есть что-то лучше, дайте мне знать. Спасибо. :)
Me_developer
Я думаю, что вы можете просто сделать 'return option.attr ("тип данных"); на карте. Это должно дать вам массив значений типов данных.
PCasagrande
74

Некоторые ответы использует each, но mapэто лучшая альтернатива здесь ИМХО:

$("select#example option").map(function() {return $(this).val();}).get();

В mapjQuery есть (как минимум) две функции. В ответе Томаса Петерсена используется «Utilities / jQuery.map»; в этом ответе используется «Обход / карта» (и, следовательно, немного более чистый код).

Это зависит от того, что вы собираетесь делать со значениями. Если, скажем, вы хотите вернуть значения из функции, mapвозможно, это лучшая альтернатива. Но если вы собираетесь использовать значения напрямую, вы, вероятно, хотите each.

CIC
источник
4
Вы можете использовать this.value вместо $ (this) .val () здесь. Вам также будет лучше обслужить поиск детей в начальном селекторе (опция #example). Хорошая жесткость с get () в конце.
Алекс Барретт
1
@ Алекс Баррет: Ну, эту проблему можно решить без использования jQuery. Вызов jQuery с элементом в качестве аргумента будет просто обернуть элемент в объект jQuery (т.е. не обходить дерево, т.е. не так дорого). Так что, возможно, в качестве микрооптимизации, да.
CIC
карта FTW. Это именно то, как это должно быть сделано. Однако get () в конце кажется ненужным (который возвращает узел DOM, а val () уже дает нам строку, поэтому ...?) Var opts = $ ('# cm_amt option'). Map (function ( ) {return parseInt ($ (this) .val ());});
sbeam
3
@sbeam: «Поскольку возвращаемое значение является массивом в jQuery, get()возвращаемый объект очень часто работает с базовым массивом». - api.jquery.com/map
cic,
Он очень помог мне, я хотел текст не значение, так что я просто изменен text()вместо val(). Спасибо ! (Я заставил вас пройти 1000 ;->)
ParPar
52
$('select#id').find('option').each(function() {
    alert($(this).val());
});
Raibaz
источник
1
Это тикет, потому что мне нравится кэшировать элементы в переменные при инициализации, а не использовать селектор.
Даг Борода
1
Также работает с $ (this) (что и искало), например,
Hugh Seagraves
16
$("#id option").each(function()
{
    $(this).prop('selected', true);
});

Хотя, ПРАВИЛЬНЫЙ способ - установить свойство DOM элемента, например, так:

$("#id option").each(function(){
    $(this).attr('selected', true);
});
Бен Сьюардс
источник
4
Разве это не будет .attr («выбранный», «выбранный»)?
v010дя
16

Это поместит значения параметров #myselectboxв хороший чистый массив для вас:

// First, get the elements into a list
var domelts = $('#myselectbox option');

// Next, translate that into an array of just the values
var values = $.map(domelts, function(elt, i) { return $(elt).val();});
Томас Петерсен
источник
Вы можете сократить это до:$.map(domelts, elt=> $(elt).val())
Jonno_FTW
11

Вы можете взять все ваши "выбранные значения" по имени флажков и представить их в строке, отделенной ",".

Хороший способ сделать это - использовать jQuery $ .map ():

var selected_val = $.map($("input[name='d_name']:checked"), function(a)
    {
        return a.value;
    }).join(',');

alert(selected_val);
Limpan
источник
6
этот код довольно нечитабелен, я бы никогда не использовал его, даже если это круто.
Нажмите Upvote
7
Также вопрос о, selectа optionне о флажках.
Дементик
6

Рабочий пример

Самый эффективный способ сделать это - использовать $.map()

Пример:

var values = $.map($('#selectBox option'), function(ele) {
   return ele.value; 
});
Навин Кумар Алонекар
источник
3

Для этого вы можете использовать следующий код:

var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function(){
    assignedRoleId.push(this.value);
});
Митул Махешвари
источник
2

Для варианта с множественным выбором:

$('#test').val()возвращает список выбранных значений. $('#test option').lengthвозвращает общее количество опций (как выбранных, так и не выбранных)

Сергей Зиновьев
источник
1

Это простой скрипт с jQuery:

var items = $("#IDSELECT > option").map(function() {
    var opt = {};
    opt[$(this).val()] = $(this).text();
    return opt;
}).get();
var selectvalues = [];

for(var i = 0; i < items.length; i++) {
    for(key in items[i]) {


        var id = key;
        var text = items[i][key];

        item = {}
        item ["id"] = id;
        item ["text"] = text;

        selectvalues.push(item);

    }
}
console.log(selectvalues);
copy(selectvalues);
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
Cubiczx
источник
1

Вот простой пример в jquery для получения всех значений, текстов или значения выбранного элемента или текста выбранного элемента

$('#nCS1 > option').each((index, obj) => {
   console.log($(obj).val());
})

printOptionValues = () => {

  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).val());
  })

}

printOptionTexts = () => {
  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).text());
  })
}

printSelectedItemText = () => {
  console.log($('#nCS1 option:selected').text());
}

printSelectedItemValue = () => {
  console.log($('#nCS1 option:selected').val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="1" id="nCS1" name="nCS1" class="form-control" >
					<option value="22">Australia</option>
          <option value="23">Brunei</option>
          <option value="33">Cambodia</option>
          <option value="32">Canada</option>
          <option value="27">Dubai</option>
          <option value="28">Indonesia</option>
          <option value="25">Malaysia</option>				
</select>
<br/>
<input type='button' onclick='printOptionValues()' value='print option values' />
<br/>
<input type='button' onclick='printOptionTexts()' value='print option texts' />
<br/>
<input type='button' onclick='printSelectedItemText()' value='print selected option text'/>
<br/>
<input type='button' onclick='printSelectedItemValue()' value='print selected option value' />

NuOne
источник
0
$("input[type=checkbox][checked]").serializeArray();

Или:

$(".some_class[type=checkbox][checked]").serializeArray();

Чтобы увидеть результаты:

alert($("input[type=checkbox][checked]").serializeArray().toSource());
Павел Криницкий
источник
0

Если вы ищете все варианты с каким-то выделенным текстом, то код ниже будет работать.

$('#test').find("select option:contains('B')").filter(":selected");
Tjcool
источник
0

Короткий путь

$(() => {
$('#myselect option').each((index, data) => {
    console.log(data.attributes.value.value)
})})

или

export function GetSelectValues(id) {
const mData = document.getElementById(id);
let arry = [];
for (let index = 0; index < mData.children.length; index++) {
    arry.push(mData.children[index].value);
}
return arry;}
Эмин Адилоглу
источник