Получить id всех выбранных option в select multiple

@Piga · Регистрация: 07.05.2019

Студворк — интернет-сервис помощи студентам

Доброго времени суток! Подскажите пожалуйста как перебрать select и получить id всех выбранных option?(Используя jquery или чистый js)
P.S Нужно тк у каждого option id-это id товара с этим названием.
Select следующего вида:

HTML5
1
2
3
4
5
6
7
8
9
10
<select>
<optgroup label="Группа1">
 <option id="3">Товар 1</option>
 <option  id="10">Товар 2</option>
</optgroup>
<optgroup label="Группа1">
 <option  id="11">Товар 1</option>
 <option  id="12">Товар 2</option>
</optgroup>
</select>

@Plastun20 · 25.07.2020, 22:27

Piga,

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<select>
<optgroup label="Группа1">
 <option id="3">Товар 1</option>
 <option  id="10">Товар 2</option>
</optgroup>
<optgroup label="Группа1">
 <option  id="11">Товар 1</option>
 <option  id="12">Товар 2</option>
</optgroup>
</select>
<script>
var sel = document.getElementsByTagName('select');  
 
sel[0].onchange = function () {  
  var id=this.options[this.selectedIndex].id;  
  alert (id);  
 }; 
  </script>

@Piga · 26.07.2020, 00:37 **[ТС]**

Решение работает, но в моем случае не подходит, поскольку много селектов с одинаковым класом, у меня настроено событие при нажатии на кнопку. Суть такова, есть селект с классом условно "select_items", он с множественным выбором, это не учитывается в написанном вами коде, так что нужно после нажатия на кнопку получить все id выбранных option в select

@Plastun20 · 26.07.2020, 01:40

Сообщение от Piga

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

Шта?
Что вам помешало упомянуть об этом в первом сообщении?

JavaScript
1
2
3
4
5
6
7
8
9
10
btn_get.addEventListener('click', function() {
    var sel = document.querySelectorAll('.select_items');
    var idArr = [], id="0"; 
         for (let i = 0; i < sel.length; i++) {
        id = sel[i].options[sel[i].selectedIndex].id;
        idArr.push(id);
            }
          alert(idArr); 
            
});

Добавлено через 8 минут
Кнопка

HTML5
1
<button id="btn_get" >Получить все id</button>

@Piga · 26.07.2020, 02:34 **[ТС]**

Забыл. Спасибо большое за помощь!

@amr-now · 26.07.2020, 11:39

Условия противоречат друг другу:

Сообщение от Piga

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

Сообщение от Piga

Суть такова, есть селект с классом условно "select_items", он с множественным выбором

Плюс в изначальном вопросе в select отсутствует множественный выбор.

Для единственного <select multiple>:

HTML5
1
2
3
4
5
6
7
8
9
10
11
    <select class="select_items" multiple>
        <optgroup label="Группа1">
            <option id="3">Товар 1</option>
            <option id="10">Товар 2</option>
        </optgroup>
        <optgroup label="Группа1">
            <option id="11">Товар 1</option>
            <option id="12">Товар 2</option>
        </optgroup>
    </select>
    <button id="btn_get">Получить все id</button>

Обработчик кнопки для современных браузеров:

JavaScript
1
2
3
4
5
document.getElementById("btn_get").onclick = () => {
    let array = [...document.querySelector(".select_items").selectedOptions]
        .map(e => e.id);
    alert(array);
};

Вариант для браузеров 2017 года и древнее (компилируется автоматически из современного синтаксиса)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var __spreadArrays = (this && this.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
};
document.getElementById("btn_get").onclick = function () {
    var array = __spreadArrays(document.querySelector(".select_items").selectedOptions).map(function (e) { return e.id; });
    alert(array);
};

-------------
Вариант для нескольких <select>, тут уже неважно мульти или не мульти.
В jQuery оказалось на удивление просто сделать:

JavaScript
1
2
3
4
5
6
7
$("#btn_get").click(function () {
    var array = $(".select_items").map((function (i, e) {
        return $(e.selectedOptions)
            .map(function (i, e) { return e.id; }).toArray();
    })).toArray();
    alert(array);
});

@Mr_Sergo · 27.07.2020, 10:01

и никто не упомянул

Идентификатор должен обязательно начинаться с латинского символа и может содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо.

http://htmlbook.ru/html/attr/id

@j2FunOnly · 27.07.2020, 11:00

Сообщение от amr-now

В jQuery оказалось на удивление просто сделать

jQuery(":selected")

JavaScript
1
2
3
4
5
6
7
  $("#btn_get").click(function() {
    const ids = $('.select_items :selected')
      .map((i, el) => el.id)
      .toArray();
 
    console.log(ids);
  });

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Piga 3 / 3 / 0 Регистрация: 07.05.2019 Сообщений: 18
	26.07.2020, 00:37 [ТС]
	Решение работает, но в моем случае не подходит, поскольку много селектов с одинаковым класом, у меня настроено событие при нажатии на кнопку. Суть такова, есть селект с классом условно "select_items", он с множественным выбором, это не учитывается в написанном вами коде, так что нужно после нажатия на кнопку получить все id выбранных option в select 0

@Piga 3 / 3 / 0 Регистрация: 07.05.2019 Сообщений: 18
	26.07.2020, 02:34 [ТС]
	Забыл. Спасибо большое за помощь! 0