Как я могу использовать JQuery для доступа ко всем выпадающим спискам определенного класса?

Question

Иметь потенциально бесконечную коллекцию раскрывающихся списков, предоставляя им все один и тот же класс, должна иметь возможность доступа, циклического прохождения и сбора выбранного значения для опции всех раскрывающихся списков независимо от того, сколько их может быть. Окончательная форма должна выглядеть примерно так: 5,6,7,6,4,2,3,4,3,4 в виде списка разделенных запятыми выбранных значений из всех раскрывающихся списков.

Answer 1

Похоже, что ответ, представленный cletus, имеет две проблемы, которые необходимо решить для моей версии jQuery (1.6.2). Код ниже работал правильно для меня и предупреждает «3,5» при использовании против образца HTML в сообщении Клетуса. Обратите внимание, что он находит последний выбранный параметр, а не оба выбранные параметры из первого блока выбора HTML.

var ids = $("select.classname > option:selected").map(function(n, i) { return $(i).val() } ).toArray().join(",");

alert(ids);

Во-первых, он использовал неверный аргумент в обратном вызове функции карты. Мне нужно было изменить n на i : return $(n).val() против return $(i).val()

Во-вторых, он возвращал объект jQuery, который нужно было преобразовать в массив, прежде чем можно было использовать метод массива 'join': .toArray().join(",")

После того, как были сделаны эти 2 незначительные модификации, ответ Клетуса отлично сработал для меня в jQuery 1.6.2

Answer 2

var ids = $("select.classname > option:selected").map(function(n, i) {
  return $(n).val();
}).join(",");

Чтобы объяснить, что он делает:

1. Во-первых, он выбирает все выбранные опции в данных выпадающих меню (обозначается как «имя класса»);
2. Передает каждую выбранную опцию в функцию обратного вызова;
3. Эта функция обратного вызова возвращает значение выбранной опции;
4. Поскольку вы вызывали map для массива выбранных опций, теперь вы получили массив значений, используя метод map();
5. Функция join() преобразует этот массив в список через запятую.

Например:

<select class="classname">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3" selected>Three</option>
</select>
<select class="classname">
  <option value="4">Four</option>
  <option value="5" selected>Five</option>
</select>

сначала использует $() для создания объекта jQuery из выбранных опций (2, 3 и 5), отображает атрибуты значения в массив {2,3,5}, а затем объединяет их в строку с разделителями-запятыми "2,3,5".