javascript - 尝试将动态创建的选择元素(标签)与选项连接到动态创建的表行

Question

第一段代码是我希望变量 select 执行的操作的工作示例。 var Select 是变量 tr 中有一个 td。这段代码中使用了变量 tr 两次。一次是在表有 html 时附加 tr，另一次是在表没有任何 html 时附加 tr。原因是因为如果没有 html，它应该附加标题和带有 select 元素的行以及应该位于该行上的其余数据，如果有 html，它应该只附加该行以防止重复标题。所以我想要一个名为 tr 的干净变量，每次用户调用它时都会附加它。 jsfidle如果您单击下拉菜单，您可以选择该项目，然后将出现新行。

      $('#autocomplete').autocomplete({
         lookup: currencies,
        onSelect: function (suggestion) {
        var thehtml = '<strong>Item:</strong> ' + suggestion.value + ' <br>      <strong>price:</strong> ' + suggestion.data + "<br>" + suggestion.divs;
        var tableheader = ($("<thead>")
            .append($("<tr>")
                .append($("<th>Item</th><th>Qty</th><th>Price</th>")))
            )
      var select = " <select class = 'select'><option value='volvo>Volvo</option> <option value='saab'>Saab</option>  <option value='mercedes'>Mercedes</option> <option value='audi'>Audi</option> </select>"
  var tr = "<tr><td>"+ suggestion.value + "</td><td>" +select +"</td></tr>"

 if($(".table").html().length <= 0)
 {
    $('.table').append($("<table>")).append(tableheader).append(tr);
}else{
    if($(".table").html().length > 0){
        $(".table").append(tr)
    }

}

问题是我希望动态地组成选择元素，所以我尝试了一些东西，但我不明白为什么它不起作用。它没有接收变量。我使用 $.each 实现变量是否错误？

  $('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
  var thehtml = '<strong>Item:</strong> ' + suggestion.value + ' <br> <strong>price:</strong> ' + suggestion.data + "<br>" + suggestion.divs;
  var tableheader = ($("<thead>")
            .append($("<tr>")
                .append($("<th>Item</th><th>Qty</th><th>Price</th>")))
            )

var  selectValues = { "3": "2", "2": "1" , "1": "..."};

 var select =  $.each(selectValues, function(key, value){
        $('.select').append($('<option>', {value: value}).text(value));
        // <option value='volvo>Volvo</option>
    });

  var tr = "<tr><td>"+ suggestion.value + "</td><td><select class ='select'>" + select + "</select></td></tr>";



 if($(".table").html().length <= 0)
 {
    $('.table').append($("<table>")).append(tableheader).append(tr);
}else{
    if($(".table").html().length > 0){
        $(".table").append(tr)
    }

}


},
maxHeight:100,
width:600

});

感谢您的帮助

Answer 1

如果只使用值，为什么还要使用对象？如果您确实不需要 key ，只需创建一个数组:

var  selectValues = ["2", "1", "..."];
var value;

var select =  selectValues.forEach(function(value){
    $('.select').append($('<option>', {value: value}).text(value));
    // <option value='volvo>Volvo</option>
});
// or if you want more compatibility
for (var i = 0, len = selectValue.length; i < len; i++) {
    value = selectValue[i];
    $('.select').append($('<option>', {value: value}).text(value));
});

编辑:我犯了一些错误，抱歉。首先 forEach 不会返回任何内容，因此它无法工作。我用你的 fiddle 测试。试试这个(如果你不想使用 map ，请用旧的 for 循环替换)。

var select =  selectValues.map(function(value){
    return "<option value=" + value + ">"  + value + "</option>";
    // <option value='volvo>Volvo</option>
}).join('');

首先你不必从 $('.select') 追加，因为此时这个 dom 不存在并且您不能像这样在字符串中连接数组。