Jquery 用空格追加选择选项

我在使用对象数组中的选项填充select时遇到问题。以下是传递的数组：

data: [ { name: 'James'   },
        { name: 'James 2' },
        { name: 'Peter'   },
        { name: 'Paul'    } ]

然后，我的目标是用数据中的选项填充名为scheduleSelect的select。下面的代码适用于除James 2之外的所有值，其中选项值设置为“James”，然后数字2出现在引号之外。这是我的密码：

var arrayLength = data.length;
for (var i = 0; i < arrayLength; i++) {
    $('#scheduleSelect').append('<option value='+data[i]["name"]+'>'+data[i]["name"]+'</option>')
};

以下是不可靠的输出：

<option value="James">James</option>
<option value="James" 2>James 2</option>

任何帮助都将不胜感激。谢谢。

尝试使用：

---

您的问题是，value属性周围没有引号，因此浏览器会将下一个空格之前的所有内容作为值

这将有助于：

append('<option value="'+data[i]["name"]+'">'+data[i]["name"]+'</option>')

试试这个：

var data = [ { name: 'James'   },
          { name: 'James 2' },
          { name: 'Peter'   },
          { name: 'Paul'    } ];

var arrayLength = data.length;
    for (var i = 0; i < arrayLength; i++) {
      $('#scheduleSelect').append('<option value='+data[i]["name"]+'>'+data[i]["name"]+'</option>')
    }

---

这是一个棘手的问题：

请记住，forEach在较旧的浏览器IE 8等中不可用。没有理由为每个数据条目创建新的jQuery对象。这只会让事情变慢。谢谢你——这个优雅的解决方案奏效了，就像下面托马斯的修正案一样。我对为每个数据条目创建一个新的jQuery对象感兴趣。对于这么小的东西，这可能无关紧要，但是对于更大的阵列呢？每次创建一个新对象比像我这样递归地生成html代码要贵多少？您必须运行jsPerf测试来确定性能的提高，但是我已经编辑了我的答案，以包括本机DOM对象的创建。

append('<option value="'+data[i]["name"]+'">'+data[i]["name"]+'</option>')

var data = [ { name: 'James'   },
          { name: 'James 2' },
          { name: 'Peter'   },
          { name: 'Paul'    } ];

var arrayLength = data.length;
    for (var i = 0; i < arrayLength; i++) {
      $('#scheduleSelect').append('<option value='+data[i]["name"]+'>'+data[i]["name"]+'</option>')
    }