从DOM数据元素动态构建选择语句[重复]答案

【问题标题】：dynamically building select statement from DOM data element [duplicate]从DOM数据元素动态构建选择语句[重复]
【发布时间】：2013-02-02 08:07:14
【问题描述】：

我需要根据提供 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 语句？

【问题讨论】：

你有什么问题？
仅供参考 - 不要说 select 语句，这听起来像是在谈论进行数据库查询。
当我看到“选择语句”时，我还认为您正在客户端构建 SQL 查询，这是一个非常糟糕的主意。一个更好的标题可能是“动态创建一个选择元素”。如果它们是构造函数，则在 JS 中也约定仅以大写字母开头变量名，将其用于普通变量会使将来阅读您的代码的人感到困惑；您应该将 Organizations 重命名为 organizations。
再次查看代码，Organizations 不是有效的 JS 对象，该代码应该不起作用。它看起来更像是一个以[ 和] 开始/结束的数组，而不是{ 和}，并且每个项目之间需要一个逗号。如果它应该是一个对象，它需要一个标签和一个: 到每个子对象的左侧，并且除了最后一个子项之外还有一个逗号。
我正在尝试构建一个 HTML 选择下拉菜单。在 Dojo 中，我使用了一个指向某个 dom 对象的数据存储，然后使用一些 dojo 选择标签，为 dom 对象中的所有事物构建一个 html 选择小部件

标签： jquery jquery-mobile

【解决方案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

【讨论】：