Перебирать <select> опции

202

У меня есть <select>элемент в HTML. Этот элемент представляет раскрывающийся список. Я пытаюсь понять, как перебирать опции в <select>элементе через JQuery.

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

user208662
источник

Ответы:

346
$("#selectId > option").each(function() {
    alert(this.text + ' ' + this.value);
});
karim79
источник
2
Это странно, это должно работать, но по некоторым причинам это не для меня ... :(
SublymeRick
14
Это должно быть $ (this) .val () вместо this.value, как сказал IT ppl.
Тихара
У меня сработал только ответ IT-госзакупок (и это было не просто «это»)
user984003
1
Это должно быть $ (this) .val () и $ (this) .text () для получения значения и текста соответственно
Амит Бхагат
5
@AmitKB - лучше использовать собственный метод DOM для извлечения текста и значений. 1) Короче 2) избегает создания двух новых объектов jQuery.
karim79
79

Это сработало для меня

$(function() {
    $("#select option").each(function(i){
        alert($(this).text() + " : " + $(this).val());
    });
});
IT чел
источник
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

И необходимый, не jquery способ, для подписчиков, так как 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
  }
rogerdpack
источник
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
$.each($("#MySelect option"), function(){
                    alert($(this).text() + " - " + $(this).val());                    
                });
Йохана Амбавкар
источник
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))
zzart
источник