current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 15 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 yesterday
1  
You cannot append the same element to two different parents. You'll need to create a second element. – Bergi yesterday
up vote 18 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 yesterday
5  
@SanthoshPrabu For the same reason you can't be in two places at once, a DOM node can't have two parents – Izkata yesterday
up vote 8 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 yesterday
up vote 7 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 ;) – Qsprec yesterday
    
Thank you @Qsprec – Mr.7 yesterday
    
@Mr.7 ya working bro. Thanks see VadimB answer its simple – Santhosh Prabu yesterday
    
Yeah! It is. @SanthoshPrabu – Mr.7 yesterday
up vote 4 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 yesterday
    
you are welcome – Shafiqul Islam yesterday
up vote 3 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 yesterday
    
you're welcome ! – Alexandru Mihai yesterday
up vote 2 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 yesterday

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.