Question

我遇到一个问题，用一个对象数组中的选项填充选择。这是传递的数组：

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

我的目标是填充名为＆＃34; scheduleSelect＆＃34;内有选项＆＃34;数据＆＃34;。下面的代码适用于除James 2之外的所有值，其中选项值设置为＆＃39; James＆＃39;然后数字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>

非常感谢任何帮助。感谢。

Answer 1

尝试使用.appendTo()：

data.forEach(function(v) {
    var $opt = $('<option>');
    $opt.val(v.name).text(v.name);
    $opt.appendTo('#scheduleSelect');
};

我在这里创建一个新的option并将其附加到您现有的选择中。我还改为使用forEach来简化循环。

但是，出于性能原因（如果您循环使用4次以上），我建议您创建普通的旧DOM对象：

data.forEach(function(v) {
    var opt = document.createElement('option');
    opt.textContent = v.name;
    opt.value = v.name;
    $('#scheduleSelect').append(opt);
};

Answer 2

您的问题是您在value属性周围没有引号，因此浏览器会将所有内容都占用，直到下一个空格为值。

这将有效：

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

Answer 3

试试这个：

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>')
    }

这是小提琴：http://jsfiddle.net/y588cfo5/

使用空格追加选择选项

3 个答案: