current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 18 down vote favorite
1

Simple question: I want to loop the array values in two dropdown lists in HTML using JavaScript. But only one dropdown is working. If I comment the one, the another one works. I want to fill the values in both the dropdown lists. What's wrong in this simple code?

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
    select2.appendChild(el);
}
<select id="selectNumber">
    <option>Choose a number</option>
</select>
<select id="selectNumber2">
    <option>Choose a number</option>
</select>

share|improve this question
    
Check this stackoverflow.com/questions/34705364/… – Aman Rawat Nov 11 at 8:46
1  
You cannot append the same element to two different parents. You'll need to create a second element. – Bergi Nov 11 at 14:34
up vote 20 down vote accepted

Do not use the same element for both controls. Clone it first

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
  select2.appendChild(el.cloneNode(true));
}
<select id="selectNumber">
  <option>Choose a number</option>
</select>
<select id="selectNumber2">
  <option>Choose a number</option>
</select>

share|improve this answer
    
its worked bro but y clonenode y cant it accept directly – Santhosh Prabu Nov 11 at 8:49
5  
@SanthoshPrabu For the same reason you can't be in two places at once, a DOM node can't have two parents – Izkata Nov 11 at 14:51
    
@Izkata superb explanation thanks – Santhosh Prabu Nov 14 at 4:09
up vote 10 down vote

Create a option element for each select,appendChild doesn't clone the element so the second append takes the element from the first

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
   var el1 = document.createElement("option");
  el1.textContent = opt;
  el1.value = opt;
  select.appendChild(el1);
  select2.appendChild(el);
}
<select id="selectNumber">
  <option>Choose a number</option>
</select>
<select id="selectNumber2">
  <option>Choose a number</option>
</select>

share|improve this answer
1  
its also worked bro. Thanks – Santhosh Prabu Nov 11 at 8:52
up vote 8 down vote 

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2"); 
var options = ["1", "2", "3", "4", "5"];
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
    var el2 = document.createElement("option");
    el2.textContent = opt;
    el2.value = opt;
    select2.appendChild(el2);    
}
<select id="selectNumber">
    <option>Choose a number</option>
</select>
<select id="selectNumber2">
    <option>Choose a number</option>
</select>

Create two different nodes and add them.

Reason to why your code didn't work is here

Hope this helps :)

share|improve this answer
    
Upvote for the reason ;) – A. Ozan Ekici Nov 11 at 8:48
    
Thank you @Qsprec – Mr.7 Nov 11 at 8:49
    
@Mr.7 ya working bro. Thanks see VadimB answer its simple – Santhosh Prabu Nov 11 at 9:05
    
Yeah! It is. @SanthoshPrabu – Mr.7 Nov 11 at 9:07
up vote 5 down vote

You can use both JavaScript and jQuery:

<select id="selectNumber">
    <option>Choose a number</option>
</select>
<select id="selectNumber2">
   <option>Choose a number</option>
</select>

This is the jQuery code section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
    var options = ["1", "2", "3", "4", "5"];

    $.each(options, function(key, value) {
        $('#selectNumber,#selectNumber2').append($("<option/>", {
            value: key,
            text: value
        }));
    });
</script>

This is JavaScript code:

<script>
        var select = document.getElementById("selectNumber");
        var select2 = document.getElementById("selectNumber2");
        var options = ["1", "2", "3", "4", "5"];
        for (var i = 0; i < options.length; i++) {
            var opt = options[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            select.appendChild(el);
            select2.appendChild(el.cloneNode(true));
        }
    });
</script>

This is other option if you want separate the option code

<script>
    var select = document.getElementById("selectNumber");
    var select2 = document.getElementById("selectNumber2");
    var options = ["1", "2", "3", "4", "5"];
    for (var i = 0; i < options.length; i++) {
        var opt = options[i];

        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);

        var e2 = document.createElement("option");
        e2.textContent = opt;
        e2.value = opt;
        select2.appendChild(e2);
    }
</script>
share|improve this answer
    
thanks for jquery – Santhosh Prabu Nov 11 at 9:01
    
you are welcome – Shafiqul Islam Nov 11 at 9:57
up vote 4 down vote

Here is the method without clone (jsFiddle):

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
    var opt = options[i];
    select.add(new Option(opt,opt));
    select2.add(new Option(opt,opt));
}

Read more about the add function for JavaScript select here.

share|improve this answer
1  
Mihal Its also simple nice and thanks – Santhosh Prabu Nov 11 at 9:08
    
you're welcome ! – Alexandru Mihai Nov 11 at 9:08
up vote 3 down vote

The issue is the element you are creating can only be append in one parent. Not both. Bellow the code snippet that works

var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
  var copy = el.cloneNode(true);
  select2.appendChild(copy);
}

Just notice the line var copy = el.cloneNode(true); this create a new clone of the element, and then append it to another select.

share|improve this answer
1  
simple and clear explanation. Thanks – Santhosh Prabu Nov 11 at 9:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.