JS/HTML -- dynamically create select element with options

Question

I have an ExtJS application. In my grid I am using the columns renderer function to return the select element drop down. My current implementation is below:

//grid col renderer fn

renderer:function(val, meta, rec) {
  return [
    '<select id="states"  value="" disabled selected>Select...</option>'+             
      '<option value="CA">California</option>'+
      '<option value="NY">New York</option>'+
      '<option value="TX">Texas</option>'+
      '<option value="FL">Florida</option>'+
      '<option value="NJ">New Jersey</option>'+               
    '</select>'
  ];

and this all works fine but now the list of options is going to be dynamic. The sample JSON is below:

"states":[{"value":"CA","name":"California"},{"value":"Ny", "name":"New York"},{...}]

So I want to iterate the "states" array and create an option el for each object then push that option into the select element.

Thanks

Where is your attempt?

Niet the Dark Absol
– Niet the Dark Absol

2015-08-10 16:57:20 +00:00
Commented Aug 10, 2015 at 16:57 — Niet the Dark Absol
– Niet the Dark Absol, Commented Aug 10, 2015 at 16:57

Tariq · Accepted Answer · 2015-08-10 17:09:11Z

2

Try this:

this_select_content = '';
for(var i=0; i < states.length; i++){
    var this_select_content += '<option value="' + states[i]['value'] + '">' + states[i]['name'] + '</option>';
}
$("#states").empty().append(this_select_content);

answered Aug 10, 2015 at 17:09

Tariq

2,8813 gold badges24 silver badges29 bronze badges

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

Comments

Rayon · Accepted Answer · 2015-08-10 17:12:16Z

1

Try this:

var this_select_content = '<select id="states">';
for(var i=0; i < states.length; i++){
    this_select_content += '<option value="' + states[i]['value'] + '">' + states[i]['name'] + '</option>';
}
this_select_content +='</select>'
$("#states").empty().append(this_select_content);

Basically you need to iterate through the array of states..

answered Aug 10, 2015 at 17:12

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Collectives™ on Stack Overflow

JS/HTML -- dynamically create select element with options

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related