Как получить все варианты выбора с помощью jQuery?

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

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

Ответов (18)

Решение

Использовать:

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

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

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

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

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

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

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

$('select#id').find('option').each(function() {
    alert($(this).val());
});

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

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

// Next, translate that into an array of just the values
var values = $.map(options, e => $(e).val())
$("#id option").each(function()
{
    $(this).prop('selected', true);
});

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

$("#id option").each(function(){
    $(this).attr('selected', true);
});
$("input[type=checkbox][checked]").serializeArray();

Или:

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

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

alert($("input[type=checkbox][checked]").serializeArray().toSource());

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

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

Пример:

var values = $.map($('#selectBox option'), function(ele) {
   return ele.value; 
});

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

$('#test').find("select option:contains('B')").filter(":selected");

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

var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function(){
    assignedRoleId.push(this.value);
});

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

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

Это простой скрипт с 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>

Вот простой пример в 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' />

Мне он показался коротким и простым, и его можно протестировать в самой консоли Dev Tool.

$('#id option').each( (index,element)=>console.log( индекс: $ {index}, значение: $ {element.value}, текст: $ {element.text} ) )

    var arr = [], option='';
$('select#idunit').find('option').each(function(index) {
arr.push ([$(this).val(),$(this).text()]);
//option = '<option '+ ((result[0].idunit==arr[index][0])?'selected':'') +'  value="'+arr[index][0]+'">'+arr[index][1]+'</option>';
            });
console.log(arr);
//$('select#idunit').empty();
//$('select#idunit').html(option);

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

$(() => {
$('#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;}

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

var myOpts = document.getElementById('yourselect').options;
alert(myOpts[0].value) //=> Value of the first option

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

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

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

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

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

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

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

alert(selected_val);