appending array of option object to multiple selects

Question

I am trying to append array of option objects to two select tag. But it appends to second select tag only.

<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>

If I use only one select to append options it works. But for more than two it wont. It appends to last one only. Please help to resolve this...

Rory McCrossan · Accepted Answer · 2014-12-23 11:57:13Z

4

Your code is working. What happens is that it first appends the options to #select1 however because it is a reference variable the same options are then moved to #select2.

To solve this you need to clone the options to make a copy of them to add to the second select:

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

Example fiddle

answered Dec 23, 2014 at 11:57

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1514042 · Accepted Answer · 2014-12-23 12:21:02Z

Alternatively you can make a step further and create a function populating your selects with data, something like:

<!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>

Collectives™ on Stack Overflow

appending array of option object to multiple selects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related