Question

我正在尝试将选项对象数组附加到两个选择标记。但它仅附加到第二个选择标记。

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<select id="select1"></select>
<select id="select2"></select>
<script>
    var options = [];
    var option1 = new Option("1", "1");
    options.push(option1);
    var option2 = new Option("2", "2");
    options.push(option2);
    var option3 = new Option("3", "3");
    options.push(option3);
    $("#select1").append($(options));
    $("#select2").append($(options));
</script>

如果我只使用一个选项来附加选项，那就可以了。但是对于两个以上它不会。它只附加到最后一个。请帮忙解决这个问题......

Answer 1

您的代码正常运行。会发生的事情是它首先将options附加到#select1但是因为它是一个引用变量，所以相同的选项会移到#select2。

要解决此问题，您需要克隆选项以复制它们以添加到第二个选择：

$("#select1").append($(options));
$("#select2").append($(options).clone());

Example fiddle

Answer 2

或者，您可以更进一步，创建一个用数据填充选择的函数，例如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <select id="select1"></select>
    <select id="select2"></select>

    <script>
        $(function () {
            var selectData = [{ id: "1", text: "1" }, { id: "2", text: "2" }, { id: "3", text: "3" }];

            var bindSelect = function (args) {
                var data = args.data;
                var $select = args.select;

                $select.append(data.map(function (item) { return new Option(item.id, item.text); }));
            };

            $("#select1, #select2").each(function () {
                bindSelect({ data: selectData, select: $(this) });
            });

        });
    </script>
</body>
</html>

将选项对象的数组附加到多个选择

2 个答案: