add options by javascript function not working

Question

I have a javascript function. This function is supposed to populate a html select-box by adding options.

Argument passed is, for example, [['val1','txt1'],['val2','txt2']]

I expected that it would generate the html as under:

<select id='element_id'>
    <option value='val1'>txt1</option>
    <option value='val2'>txt2</option>
</select>

<script>
function popu_select(x) {
    for (i in x) {
      $('#element_id').append($(document.createElement("option")).attr("value", "i[0]").text("i[1]"));
              }
</script>

But it is not populating the select-box. What I may be doing wrong here?

Regards, Vineet

It's worth noting that iterating through an array with "for ... in" is considered bad practice. Instead, it's better to use a numeric index in a plain "for" loop. — Pointy
– Pointy, Commented Nov 28, 2011 at 16:32
@Pointy, You are right. I will make use of a numeric index in a plain "for" loop. Thanks. — Vineet
– Vineet, Commented Nov 28, 2011 at 17:15

solendil · Accepted Answer · 2011-11-28 16:27:18Z

4

At least, you need to get the item of the array (i is only the index), and remove quotes when accessing the variables. Try this:

  function popu_select(x) {
    for (i in x) {
      var item = x[i]
      $('#element_id').append($(document.createElement("option")).attr("value", item[0]).text(item[1]));
    }

answered Nov 28, 2011 at 16:27

solendil

8,4684 gold badges30 silver badges29 bronze badges

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

7 Comments

idrumgood Over a year ago

Should also be noted that appending each time through the loop will be a performance hit when your list gets longer. I recommend storing your options in a variable and appending once the loop is complete.

Esailija Over a year ago

for..in for arrays kills more kittens than eval :-(

Vineet Over a year ago

Thanks to all. I will try each method suggested here & adopt the best suited to my purpose. If stuck-up, will pot the problem here again.

Vineet Over a year ago

@idrumgood, sometimes I do have lists as long as thousands of items. But I did not understand what you suggest by "I recommend storing your options in a variable and appending once the loop is complete". Bcoz the options are there in a variable itself. What is meant by "appending once the loop is complete". Can you pl. explaint in a bit detail? Thanks.

Pointy Over a year ago

@Vineet you're creating a <select> element with thousands of <option> elements inside? Won't that be somewhat difficult to use (to say the least)?

|

ranjez · Accepted Answer · 2011-11-28 16:44:33Z

2

You should use JSON to pass arguments in:

var args = [{value:1, text:'one'}, {value:2, text:'two'}];

$.each(para, function(i, option){ 
  $('#element_id').append("<option value='" + option.value + "'>" + option.text + "</option>");
});

answered Nov 28, 2011 at 16:44

ranjez

3493 silver badges13 bronze badges

1 Comment

Vineet Over a year ago

Thanks. I will try this method suggested here & if stuck-up, will pot the problem here again.

Tim B James · Accepted Answer · 2011-11-28 16:30:48Z

1

I have updated your code here so that it works.

http://jsfiddle.net/52nRL/

using the jQuery $.each function.

answered Nov 28, 2011 at 16:30

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

Comments

Daniel Szabo · Accepted Answer · 2011-11-28 16:27:38Z

1

Not jQuery, but this example does exactly what you want. It even includes an example for adding options from an array like you're doing here.

answered Nov 28, 2011 at 16:27

Daniel Szabo

7,2817 gold badges52 silver badges70 bronze badges

1 Comment

Vineet Over a year ago

Thanks. I will try this method suggested here & if stuck-up, will pot the problem here again.

Collectives™ on Stack Overflow

add options by javascript function not working

4 Answers 4

7 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related