Як отримати всі параметри вибору за допомогою jQuery?


Відповіді:


612

Використання:

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

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


63
Жодна операція JavaScript не вимагає jQuery. jQuery - це питання вибору для спрощення операцій JS.
ruuter

8
ви також можете зробити: $ ("# параметр id"). кожен (функція (ім'я, val) {var opt = val.text;});
кофіфус

3
$.mapнабагато більш елегантний і менш схильний до помилок (див. нижче).
Елліот Камерон

1
$('#id option').map((index, option) => option.value): зверніть увагу на те, як відміняється підпис зворотного дзвінка порівняно з mapфункцією JS "vanilla" ( (item, index) =>)
imrok

168

Я не знаю jQuery, але я знаю, що якщо ви отримуєте елемент select, він містить об'єкт 'options'.

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

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


3
Це найелегантніше рішення ІМО. Карта - це дуже потужна конструкція, яка точно відповідає цій ситуації.
hazerd

1
Мені дуже подобається ваше рішення - це підхід, з яким я пішов. Однак, якщо ви просто хочете, щоб вибрані значення були ще більш тривіальними: $('#selectBox').val()поверне масив вибраних значень.
whoisthemachine

Привіт, @PCasagrande У мене є власна назва атрибута "тип даних". Як я можу отримати значення цього за допомогою вашого рішення? Що я роблю - це "option.data-type", але це дає мені NaN. Заздалегідь спасибі.
Me_developer

Привіт, @PCasagrande Я отримав те, що мені потрібно, роблячи "$ (параметр, це) .attr (" тип даних ")". Але якщо у вас є щось краще, то дайте мені знати. Дякую. :)
Me_developer

Я думаю, ви можете просто зробити "return option.attr (" тип даних ");" на карті. Це повинно дати вам масив значень типів даних.
PCasagrande

74

Деякі відповіді використовують each, але mapтут краща альтернатива IMHO:

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

У mapjQuery є (принаймні) дві функції. У відповіді Томаса Петерсена використовується "Utilities / jQuery.map"; у цій відповіді використовується "Проїзд / карта" (і тому трохи чистіший код).

Це залежить від того, що ви збираєтеся робити зі значеннями. Якщо ви, скажімо, хочете повернути значення з функції, mapможливо, краща альтернатива. Але якщо ви збираєтесь використовувати ці значення безпосередньо, ви, мабуть, хочете each.


4
Ви можете фактично використовувати this.value замість $ (this) .val () тут. Вам також краще послужити, знайшовши дітей у початковому селекторі (варіант #example). Хороший жорсткий з get () наприкінці хоч.
Алекс Барретт

1
@Alex Barret: Ну, можна вирішити цю проблему, не використовуючи jQuery взагалі. Виклик jQuery з елементом в якості аргументу просто оберне елемент в об'єкт jQuery (тобто немає обходу дерев, тобто не так дорого). Тож, може, як мікрооптимізація, так.
cic

карта FTW. Саме так слід робити. Кінець get () здається непотрібним, однак (що повертає вузол DOM, а val () вже дає нам рядок, так що ...?) Var opts = $ ('# cm_amt option'). Map (function ( ) {return parseInt ($ (це) .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());
});

1
Це квиток, тому що я люблю кешувати елементи в змінні на init, а не використовувати селектор.
Дуг Борода

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

Ви можете взяти всі "вибрані значення" за назвою прапорців і подати їх у жазі, розділеній на ",".

Гарний спосіб зробити це - використовувати $ .map () jQuery:

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

alert(selected_val);

6
цей код досить нечитабельний, я б ніколи його не використовував, навіть якщо його якось круто.
Клацніть Upvote

7
також питання про, selectа optionне прапорці.
Дементік


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>

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


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

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;}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.