javascript - JQuery 附加 stange 行为

Question

我无法解释这个 .append() 行为...

var listTopic = $.parseJSON(data);
for(i = 0; i < listTopic.length ; i++)
{
     $('#idSelect').append('<option>').append(listTopic[i].name).append('</option>');
}

输出:

<option></option>
value1
<option></option>
value2

Answer 1

由于您插入的部分标签，浏览器似乎正在自动插入结束/开始标签。

您可以改用以下内容:

var listTopic = $.parseJSON(data);
for(i = 0; i < listTopic.length ; i++) {
  $('#idSelect').append('<option>' + listTopic[i].name + '</option>');
}

或者，您也可以使用:

var listTopic = $.parseJSON(data);
for(i = 0; i < listTopic.length ; i++) {
  $('#idSelect').append($('<option />').text(listTopic[i].name));
}

如果你想同时设置value/text:

var listTopic = $.parseJSON(data);
for(i = 0; i < listTopic.length ; i++) {
  $('#idSelect').append($('<option />').val(listTopic[i].name).text(listTopic[i].name));
}