Динамическое создание опций SELECT с помощью других выборов SELECT - PullRequest
Новая
       26

Динамическое создание опций SELECT с помощью других выборов SELECT

0 голосов
/ 25 июля 2011

Представь, на мгновение 

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

А также еще одно идентичное поле выбора 

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Если у меня есть еще один блок выбора, представьте, что в этих полях выбора должны быть выбраны «Volvo» и «Saab», в (третьем) результирующем блоке выбора должны содержаться опции «Volvo» и «Saab».

Кажется, просто, верно? Конечно, становится сложнее, когда кто-то меняет свой ответ, и начинают возникать вопросы, например, как я динамически расширяю его на любое количество блоков выбора (т. Е. Представьте, что у меня было более двух блоков выбора), и в целом DOM и возможно, jQuery не так дружелюбен, как, возможно, должно быть, когда дело доходит до такого рода вещей, поэтому я прошу вашей мудрости StackOverflow

Какой самый кошерный способ получить текущие значения набора полей выбора и использовать их динамически в качестве параметров другого блока выбора

Ответы [ 2 ]

1 голос
/ 25 июля 2011

Если вы называете свое первое и второе поля выбора с идентификаторами first и second и последним third .. 

// Get our select lists
var first = $("#first");
var second = $("#second");
var third = $("#third");

// Merge the selections from the first and second lists
function mergeSelections() {
    // Get the list elements
    var firstSelections = $("option:selected", first);
    var secondSelections = $("option:selected", second);

    // Clear the destination list
    third.clear();

    // Merge lists, add each selected element
    $.merge(firstSelections, secondSelections).each(function(i, item) {
        // Clone the original, add to the third list
        $(item).clone().appendTo(third);
    });
}

// Set up actions
first.change(mergeSelections);
second.change(mergeSelections);
1 голос
/ 25 июля 2011

Попробуйте это 

$("select:first option");//This will give you options dom element array and you iterate through this and create options for other select element.
...