1

I have some <select> that needs to be populated with dynamic values, coming from an array. My code is pretty simple, the HTML is made by just some empty HTML <select> with the same class (.js-select).

The JS is quite simple:

var $select = $(".js-select"); var ioSensors = [1,2,3]; // The data I want to display in the select var $optionTpl = $("<option></option>"); for( i=0 ; i<ioSensors.length ; i++ ){ //also show a leading "None" option if(i === 0){ $optionTpl.attr('value','').text('None').appendTo($select); } $optionTpl.attr('value', ioSensors[i]-1).text(ioSensors[i]).appendTo($select); }

With this code I'm having all my <select> correctly updated, but the last one is populated only with the last value of the Array, not showing even the "None" option.

Can anyone help me understand where the problem is and why is it behaving like that? Thanks!

I've made a pen Here

Improve this question

4 Answers 4

Reset to default
4

var $optionTpl = $("<option></option>"); creates an element once, then inside the loop you just keep moving that same element and just giving it a new value.

Create multiple elements inside the loop instead

var $select = $(".js-select"); var ioSensors = [1,2,3]; for( var i = 0; i < ioSensors.length; i++ ){ var $optionTpl = $("<option></option>"); if(i === 0){ $optionTpl.val('').text('None').appendTo($select); } $optionTpl.val(ioSensors[i]-1).text(ioSensors[i]).appendTo($select); }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

You forget that he needs the item None with the item 1 (index 0).
Doesn't appendTo create a clone of it?
1

As others have already suggested, the reason it doesn't work is because you create a single element and keep moving it around. Move the creation of the element inside the loop, for example as follows:

var $select = $(".js-select"); var ioSensors = [1,2,3]; // The data I want to display in the select for( i=0 ; i<ioSensors.length ; i++ ){ //also show a leading "None" option if(i === 0){ $("<option></option>").attr('value','').text('None').appendTo($select); } $("<option></option>").attr('value', ioSensors[i]-1).text(ioSensors[i]).appendTo($select); }

If you're wondering why your code seem to work for all the <select>s beside the last, according to the documentation when the target of an append is more than one element, jquery will clone the element for the first N-1 targets, and just move the element for the last:

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):

...

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

Improve this answer

Comments

1

You need to clone the element to have multiple elements

var $select = $(".js-select"); var ioSensors = [1, 2, 3]; // The data I want to display in the select var $optionTpl = $("<option></option>"); for (i = 0; i < ioSensors.length; i++) { //also show a leading "None" option if (i === 0) { $optionTpl.clone().val('').text('None').appendTo($select); } $optionTpl.clone().val(ioSensors[i] - 1).text(ioSensors[i]).appendTo($select); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="js-select"></select>

You can also write the same like

var $select = $(".js-select"); var ioSensors = [1, 2, 3]; // The data I want to display in the select var $optionTpl = $("<option></option>"); $("<option />", { value: '', text: 'None' }).appendTo($select); ioSensors.forEach(function(item) { $("<option />", { value: item - 1, text: item }).appendTo($select); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="js-select"></select>

Improve this answer

Comments

0

Here is a simple solution (pen of the solution):

var ioSensors = [1,2,3]; $(".js-select").each(function(){ for(var i=0;i<ioSensors.length;i++) { if(i === 0){ $("<option value=\"\">None</option>").appendTo($(this)); } $("<option value=\"" + ioSensors[i] + "\">" + ioSensors[i] + "</option>").appendTo($(this)); } });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.