Question

想象一下

<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

检索一组选择框的当前值并将其动态用作另一个选择框的选项的最犹太方法是什么

Answer 1

试试这个

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

Answer 2

如果您使用ID 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);

通过其他SELECT选择动态实例化SELECT选项

2 个答案: