Ітерація через <select> параметри


202

У мене є <select>елемент в HTML. Цей елемент представляє випадаючий список. Я намагаюся зрозуміти, як перебрати параметри в <select>елементі через JQuery.

Як використовувати JQuery для відображення значення та тексту кожної опції в <select>елементі? Я просто хочу відобразити їх у alert()коробці.

Відповіді:


346
$("#selectId > option").each(function() {
    alert(this.text + ' ' + this.value);
});

2
Це дивно, це повинно працювати, але чомусь це не для мене ... :(
SublymeRick

14
Він повинен бути $ (this) .val () замість цього.value, як сказав ІТ-ppl.
Тіхара

Для мене працювала лише відповідь ІТ-ppl (і це було не лише "це")
user984003

1
Для отримання значення та тексту має бути $ (this) .val () та $ (this) .text () відповідно
Amit Bhagat

5
@AmitKB - Для вилучення тексту та значень краще використовувати нативний метод DOM. 1) Це коротше 2) уникає побудови двох нових об’єктів jQuery.
karim79

79

Це працювало для мене

$(function() {
    $("#select option").each(function(i){
        alert($(this).text() + " : " + $(this).val());
    });
});

5
Якщо ви зберігаєте $(this)змінну, це було б ефективніше, тобтоvar $this = $(this); $this.text(); $this.val();...etc.
Ліам

25

також може використовувати параметризований кожен з індексом та елементом.

$('#selectIntegrationConf').find('option').each(function(index,element){
 console.log(index);
 console.log(element.value);
 console.log(element.text);
 });

// це також спрацює

$('#selectIntegrationConf option').each(function(index,element){
 console.log(index);
 console.log(element.value);
 console.log(element.text);
 });

17

І потрібний спосіб, який не потребує запитів, для підписників, оскільки Google, схоже, надсилає всіх сюди:

  var select = document.getElementById("select_id");
  for (var i = 0; i < select.length; i++){
    var option = select.options[i];
    // now have option.text, option.value
  }

4

Ви можете спробувати і так.

Ваш HTMLкод

<select id="mySelectionBox">
    <option value="hello">Foo</option>
    <option value="hello1">Foo1</option>
    <option value="hello2">Foo2</option>
    <option value="hello3">Foo3</option>
</select>

Ви JQueryКод

$("#mySelectionBox option").each(function() {
    alert(this.text + ' ' + this.value);
});

АБО

var select =  $('#mySelectionBox')[0];

  for (var i = 0; i < select.length; i++){
    var option = select.options[i];
    alert (option.text + ' ' + option.value);
  }


1

Якщо ви не хочете Jquery (і можете використовувати ES6)

for (const option of document.getElementById('mySelect')) {
  console.log(option);
}

Відповіді лише на коди відмовляють. Будь ласка, додайте пояснення, як це вирішує проблему чи чим вона відрізняється від існуючих відповідей. З відгуку
Нік

1

Ще одна варіація щодо вже запропонованих відповідей без jQuery.

Object.values(document.getElementById('mySelect').options).forEach(option => alert(option))
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.