Appending the same Option to multiple selects

Question

Hi all : quick question : I have three Select elements in my page, which I need to fill with the same options (initially). The data comes from a AJAX request.

Can somebody tell me why only the first Select has the options appended (allthough it is last in the .each()), whereas the others do not? It is not a major problem, I can solve it in other ways, but I was just curious if someone could explain this to me.

$(document).ready(function () {

            
                    var data = {test: "testing", test2: "testing2", test3: "testing3"}
                    let subscriptionSelect = $('#select1');
                    let showSelect = $('#select3');
                    let noShowSelect = $('#select4');
                    subscriptionSelect.empty().append($('<option></option>').val('').text('------'));
                    showSelect.empty().append($('<option></option>').val('').text('------'));
                    noShowSelect.empty().append($('<option></option>').val('').text('------'));
                    $.each(data, function (key, value) {
                        let option = new Option(key, value);
                        noShowSelect.append(option);
                        showSelect.append(option);
                        subscriptionSelect.append(option);
                    });
                   
                },
        );

JSFiddle : https://jsfiddle.net/stuoq3f5/

If new Option creates an HTMLOptionElement, you can attach it to 1 parent node. So you must duplicate it instead: `showSelect.append(option.cloneNode())` and so on — netizen, Nov 26 '20 at 16:03

score 0 · Answer 1 · answered Nov 26 '20 at 16:08

0

You can select all "select" elements and append the options:

$.each(data, function (key, value) {
    let option = new Option(key, value);
    $(option).html(value);
    $('select').append(option);
});

Fiddle

answered Nov 26 '20 at 16:08

Carlos Almeida

51
4

Hey Carlos : that is true (and was the solution I'm going with), thank you. However, I was wondering if anyone could explain to me why this isn't working. – Bert Van de Casteele Nov 26 '20 at 16:12

score 0 · Accepted Answer · answered Nov 26 '20 at 16:15

0

You have to use the cloneNode(true) with deep cloning because what is happening is that you are creating an option then appending it to noShowSelect, then to showSelect removing it from noShowSelect.

                   $.each(data, function (key, value) {
                    let option = new Option(key, value);
                    $(option).html(value);
                    noShowSelect.append(option.cloneNode(true));
                    showSelect.append(option.cloneNode(true));
                    subscriptionSelect.append(option.cloneNode(true));
                });

answered Nov 26 '20 at 16:15

vladox

36
2

Check the answers about copying by reference compared to by value. https://stackoverflow.com/questions/6605640/javascript-by-reference-vs-by-value#:~:text=Javascript%20is%20always%20pass%20by,a%20new%20primitive%20or%20object. – vladox Nov 26 '20 at 16:16
Very nice :) . I suspected as such, but wanted confirmation which you now have given me. Thank you very mcuh – Bert Van de Casteele Nov 26 '20 at 16:22

Appending the same Option to multiple selects

2 Answers2