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

Question

这个问题已经有答案了:

What is the best way to add options to a select from a JavaScript object with jQuery? (37 个回答)

已关闭 9 年前。

我需要根据提供 ajax 查询的表单数据动态构建一个选择下拉列表。我的 DOM 包含一个元素“organizations”和 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