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

Posted 2023-05-07

【中文标题】从DOM数据元素动态构建选择语句[重复]

【英文标题】：dynamically building select statement from DOM data element [duplicate]

【发布时间】：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 选择小部件

【参考方案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