Suppose there is a select menu like this:"
<select id="dropDown"></select>
And I wish to populate it with an array value ["apple","mango","banana"];
How can this be achieved at one go without using any looping construct?
4 Answers
Here you can do like
var arr = ["apple", "mango", "banana"];
document.getElementById('dropdown').innerHTML =
'<option>' + arr.join('</option><option>') + '</option>';
3 Comments
Cerbrus
.join() still uses a loop under the hood.
Shadab
would there be any difference,while using very large arrays?(using/not using foreach or any loop)
Praveen
@curiousUser first understand about the need of looping.. inorder to prevent code redundancy, so there will same performance in your case..so you can use any no. Of values in the array
Without the use of a loop, you would do something like this:
var x = document.getElementById("dropDown");
var option = document.createElement("option");
option.innerHTML = "apple";
x.appendChild(option);
option = document.createElement("option");
option.innerHTML = "mango";
x.appendChild(option);
option = document.createElement("option");
option.innerHTML = "banana";
x.appendChild(option);
Obviously this assumes you know what the array values are going to be ahead of time. The most common way of doing this however would be to use a loop to iterate over the array.
1 Comment
Cerbrus
+1 since this is the only answer that uses no loops whatsoever. Just fix the
.add() and .text syntax, please, since that's not quite how DOM manipulation works (You can find the proper functions in my answer)If you just mean not using looping construct like for/while:
document.getElementById('dropDown').innerHTML = ["apple","mango","banana"].map(function(e) {
return "<option>"+e+"</option>";
}).join('');
You'll want to do this:
var options = ["apple","mango","banana"],
select = document.getElementById('dropDown');
for(var i = 0; i < options.length; i++){
var option = document.createElement("option");
option.value = option.innerHTML = options[i];
select.appendChild(option);
}
The "No loops" requirement is really a bad idea. This is the most efficient way to build the list, in native JS. (Aside from micro optimizations in the loop)
It also doesn't use innerHTML on DOM elements that are rendered already, avoiding the need for the browser to re-structure the entire DOM.
1 Comment
Cerbrus
Could the person that downvoted my answer please explain why? If I made a mistake, I'd like to learn from it. If it's because of the "loop" requirement: Keep in mind that a OP's requirements aren't always the best way to solve the issue, and most of the other answers are also using loops, disguised as other functions.
select.add(new option(array[0])); select.add(new option(array[1])); select.add(new option(array[2]));