dynamic drop down list values javascript

Question

I want to populate my drop down list with dynamic values but the list remains empty in other words no option is shown Could someone help me !!! here is my code http://jsfiddle.net/n6ahz/24/

var newdiv = document.createElement('div');
var text="TEXT";
var n=0;
newdiv.innerHTML += "<br> Question " + (n) + " : " + text + " ? <br><br>";
var m = 0;

var options = '';
for (var j = 1; j < 5; j++) {
 var val = "marwa" + j;
if (val) {
    m++;
    options += " <option value="+j+"> " + val + "</option>";
     }
 }
 newdiv.innerHTML += "<select name='single' id='single'>";
 newdiv.innerHTML += " "+options + " </select> ";

document.getElementById('results').appendChild(newdiv);

CompanyDroneFromSector7G · Accepted Answer · 2012-06-01 15:04:59Z

7

Instead of

newdiv.innerHTML += "<select name='single' id='single'>";
newdiv.innerHTML += " "+options + " </select> ";

try

newdiv.innerHTML += "<select name='single' id='single'> "+options + " </select> ";

I don't think adding HTML a bit at a time works because the browser will try to render it immediately.

answered Jun 1, 2012 at 15:04

CompanyDroneFromSector7G

4,55915 gold badges61 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MarwaInsat Over a year ago

Thank u :) the problem is solved !!! I didn't expect that it has to be in a single line .

jwatts1980 · Accepted Answer · 2012-06-01 15:07:43Z

4

With innerHTML, the actual DOM gets updated everytime you make a change. So you can't reliably make piecemeal changes like you're doing. Create a variable like var html and save all your HTML updates into it, then set element.innerHTML = html.

var newdiv = document.createElement('div');
var html = "";
var text="TEXT";
var n=0;
html += "<br> Question " + (n) + " : " + text + " ? <br><br>";
var m = 0;

var options = '';
for (var j = 1; j < 5; j++) {
 var val = "marwa" + j;
 if (val) {
    m++;
    options += " <option value="+j+"> " + val + "</option>";
 }
}
html += "<select name='single' id='single'>";
html += " "+options + " </select> ";
newdiv.innerHTML = html;

document.getElementById('results').appendChild(newdiv);

answered Jun 1, 2012 at 15:07

jwatts1980

7,3742 gold badges31 silver badges46 bronze badges

1 Comment

Victor Over a year ago

+1 for suggesting using a variable and commit changes just once. My answer would be the same.

Jonathan Avery · Accepted Answer · 2012-06-01 15:18:10Z

1

var newdiv = document.createElement('div');
var text="TEXT";
var n=1;
newdiv.innerHTML += "<br> Question " + (n) + " : " + text + " ? <br><br>";
var m = 1;

var options = '';
for (var j = 0; j <= 5; j++) {
     var val = "marwa" + j;
if (val) {
        m++;
        options += " <option value="+j+"> " + val + "</option>";
         }
    }
newdiv.innerHTML += "<select name='single' id='single'  "+options + " </select> ";

document.getElementById('results').appendChild(newdiv);

answered Jun 1, 2012 at 15:18

Jonathan Avery

292 bronze badges

Collectives™ on Stack Overflow

dynamic drop down list values javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related