JS / HTML —動態創建帶有選項的select元素

Question

我有一個ExtJS應用程序。 在我的網格中，我正在使用columns renderer函數來返回選擇元素下拉列表。 我當前的實現如下：

// 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>'
  ];

一切正常，但現在選項列表將是動態的。 JSON示例如下：

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

因此，我想迭代“狀態”數組並為每個對象創建一個選項el，然后將該選項推入select元素。

謝謝

Answer 1

嘗試這個：

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);

Answer 2

嘗試這個：

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..