Loop and variable in JavaScript

Question

I create a Javascript script which create option in my html code, I have a problem when I want to put a loop in my variable. The code show me this :

<select>
    <option>undefined</option>
</select>

I have a table like

var event = ["Exercice1","Exercice2","Exercice3"];

Firstly, Here my variable :

iDiv = $('<select class="form-control">' +
    event.forEach(function (eve) {
        '<option>'+eve+'</option>'
    })
    +'</select>');
iBr = $('</br>');
iDiv.attr('id', 'select' + (currentDivsCount + i));
iDiv.attr('name', 'select' + (currentDivsCount + i));
iDiv.appendTo('table');
iBr.appendTo('table');

EDIT :

I created an other array which contains the ID of all Events and I want to put it each

var EventId = ["1","2","3"]

<option name="IdEvent">

I tried it :

iDiv = $('<select class="form-control"><option name="'+eventId.join()+'">' 
       + eventlist.join("<option>")+ '</select>');

But I have this :

<option name="1,2,3,4,5,6">Exercice1</option>

Thank you for your helps

This is the classic closure problem. See [this](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) for an explanation. — PeterVC, Dec 07 '14 at 20:11
@PeterVC: This isn't a closure problem. There's no delayed execution of functions created in a loop referencing an overwritten variable. — six fingered man, Dec 07 '14 at 20:12

score 0 · Answer 1 · answered Dec 07 '14 at 20:06

0

Use .map().join() instead of .forEach().

iDiv = $('<select class="form-control">' +
        event.map(function (eve) {
           return '<option>'+eve+'</option>'
        }).join("")
        +'</select>');

The .map() method creates a new Array that contains the values you returned from the function, and then .join(""), joins the content of that array as a single string.

You could also write it like this, which doesn't require .map() at all:

iDiv = $('<select class="form-control"><option>' +
        event.join("</option><option>")
        +'</option></select>');

And since option tags aren't required to be closed in order to be valid, you could shorten it a bit more.

iDiv = $('<select class="form-control"><option>' + event.join("<option>") + '</select>');

answered Dec 07 '14 at 20:06

six fingered man

2,460
12
15

I haven't the undefined error but now I have nothing in my select , it's just : – Memo Dec 07 '14 at 20:08
@user3524214: Did you forget the `return` statement? – six fingered man Dec 07 '14 at 20:09
How can I disable the first option then ? – Memo Dec 07 '14 at 20:16
@user3524214: `iDiv.children().first().prop("disabled", true)`. Or with less jQuery: `iDiv[0].children[0].disabled = true` – six fingered man Dec 07 '14 at 20:18
`iDiv = $('');` `iDiv[0].children[0].disabled = true` it shows nothing in my select – Memo Dec 07 '14 at 20:21
Can you help me whit the name of the option please ? I edited the 1st post ! Thank you – Memo Dec 07 '14 at 21:52
@user3524214: Can't use join to insert the content of two separate arrays. You're back to using `.map()` for this. http://jsfiddle.net/gzrb4xz2/1/ Notice that I use the `i` parameter to the `.map()` callback to fetch the name from the `eventId` array. – six fingered man Dec 07 '14 at 21:58
My last question, when I select different option in each select, I want to pass all this selected option with an URL ? How can I do it ? Thanks my friend – Memo Dec 07 '14 at 22:16
@user3524214: Please research how to accomplish this. If you get stuck on something specific, ask another question. Thanks. – six fingered man Dec 07 '14 at 22:53

Loop and variable in JavaScript

1 Answers1