jQuery - скрытое значение ввода из выбранных входов

Question

У меня есть что-то вроде этого:

<select class="bla">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

<select class="bla">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

<select class="bla">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

<input class="alloptions" type="hidden" value="">

Я хочу, чтобы значение скрытого поля ввода менялось каждый раз, когда в каждом из выбранных полей ввода выше выбрана другая опция.Это значение будет содержать выбранные параметры из всех полей ввода, разделенных запятыми.

Как я могу это сделать?

Answer 1

Что-то вроде:

$('select.bla').change(function() {
    $value = $('select.bla').map(function(){return $(this).val()}).get().join(',');
    $('input.alloptions').val($value);
});

Объяснение:

• change() срабатывает при изменении значения поля выбора
• С помощью map() мы создаем массив значений полей select и join их в строку, разделенную запятыми

Answer 2

Вам действительно нужно использовать Javascript для этого? Если вы присвоите всем трем полям выбора один и тот же атрибут «name», значения будут отправлены на сервер в виде списка, разделенного запятыми.

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

Answer 3

Метод .serialize () может воздействовать на объект jQuery, который выбрал отдельные элементы формы, такие как «input», «textarea» и «select» - это означает, что вы можете сделать следующее:

$('.bla').change(function(){
   var opts = $('select').serialize();
   $('.alloptions').val(opts);
});

Каждому «выбору» потребуется имя и значение:

selec1 = 1 & Select2 = 2 & выбор3 = 1 * 1 006 *

Answer 4

change событие то, что вы после.