Множественный выбор в JavaScript

Оффтоп javascript
1

Для проекта, над которым я работаю, мне нужен список с множественным выбором и возможностью однократного (де)выбора, который работает в Internet Explorer (10). Я нашел и изменил этот код, который работает хорошо:

Но есть проблема:

Значение выбранных опций должно отправляться методом POST в PHP-скрипт, но отправляется только одно выбранное значение. После поиска в интернете я узнал, что нужно указать NAME тега как массив. Я изменил NAME="sel_current" на NAME="sel_current[]". Но после этого изменения скрипт перестал работать.

Я надеялся, что изменение document.forms[0].sel_current в init() на document.forms[0].sel_current[] решит проблему, но этого не произошло. 



    Тест множественного выбора





    1111
    2222
    3333
    4444
    5555
    6666
    7777
2

Я бы посоветовал немного изменить подход. Вместо изменения name, оставь его как есть и собирай выбранные значения в js перед отправкой. Примерно так:

function getSelected() {
return Array.from(document.forms[0].sel_current.selectedOptions)
.map(option => option.value);
}

function sendForm() {
var selected = getSelected();
// тут отправка через ajax или добавление в hidden input
}

Это должно работать даже в IE10. Плюс такого подхода - не ломается существующая логика выбора. Главное не забудь добавить кнопку отправки формы.

3

Слушай, а что если использовать скрытые поля для отправки? Можно сделать так:

function updateHiddenFields() {
var selected = document.forms[0].sel_current;
var hiddenDiv = document.getElementById(‘hidden-fields’);
hiddenDiv.innerHTML = ‘’;
for (var i = 0; i < selected.options.length; i++) {
if (selected.options[i].selected) {
var input = document.createElement(‘input’);
input.type = ‘hidden’;
input.name = ‘sel_current’;
input.value = selected.options[i].value;
hiddenDiv.appendChild(input);
}
}
}

Добавь div для скрытых полей и вызывай updateHiddenFields() при изменении. Должно сработать даже в IE10.

4

слушай, я тоже недавно столкнулся с похожей проблемой. в итоге решил так: собирал выбранные значения через javascript и отправлял их через ajax. примерно так:

function getSelected() {
var selected = ;
var options = document.forms[0].sel_current.options;
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
selected.push(options[i].value);
}
}
return selected;
}

function sendData() {
var values = getSelected();
// тут отправка через ajax
}

это работало даже в ie10. может, тебе тоже подойдет такой вариант? главное не забудь добавить кнопку для отправки формы, чтобы вызывать sendData()