prototypejs - 使用 Prototype-JS 填充选择框的正确方法

Question

我想用 ajax 获取的数据填充一个选择框。

初始 HTML 代码如下所示：

<select id="myid" name="myname">
</select>

我需要避免innerHTML和其他类似的解决方法。我尝试使用appendChild，但似乎没有用。我对原型真的很陌生，所以我真的不知道该怎么做。

Answer 1

假设您想将自创建对象的所有成员作为键值对添加到select元素中，您可以这样做：

var data = {
  a: 'Peter',
  b: 'Paul',
  c: 'Mary'
};

$('mySelect').update($H(data).map(function(o) {
  return '<option value="' + o.key + '">' + o.value + '</option>';
}).join(''));
​

您可以在此处找到它的 jsFiddle。

代码背后的基本思想是option，通过将每个元素转换为字符串，从给定的数据对象创建元素。这是通过map方法完成的。

$H会将数据对象转换为 Prototype对象，这Hash在这里派上用场，因为它将{ key, value }对象传递给它的映射调用的第一个参数。

将所有元素转换为字符串后，您只需join通过一个空字符串（或您喜欢的任何非 HTML 代码，\n 也可以）将它们用于该update方法。

老实说，Element#update使用innerHTML所以这实际上不是一种解决方法。这只是一种方法。