jquery - 从 DOM 数据元素动态构建 select 语句

Question

我需要根据提供 ajax 查询的表单数据动态构建选择下拉列表。我的 DOM 包含一个带有 4 个孩子的元素“组织”。具有组织 ID 和组织名称的孩子

Organizations = {
    { id="2", name="Systems"}
    { id="4", name="Network"}
    { id="5", name="Operations"}
    { id= "7", name="Security"}
}

我需要构建以下选择子句

<select name='organization'>
    <option value="2">Systems</option>
    <option value="4">Network</option>
    <option value="5">Operations</option>
</select>

如何动态构建 select 语句？

Answer 1

Organizations = {
     { id="2", name="Systems"}
     { id="4", name="Network"}
     { id="5", name="Operations"}
     { id= "7", name="Security"}
}

鉴于上述对象：

var $el = $('<select></select>');  //create a new DOM Element with jQuery syntax
for (i in Organizations) { //iterate through the object and append options
  $el.append('<option value="' + Organizations[i]['id'] + '">' + Organizations[i]['name'] + '</option>');
}

然后将创建的元素附加到某处......

$('body').append($el);  //should work