尝试将动态创建的带有选项的选择元素(标记）连接到动态创建的表行

Trying to connect a dynamically created select element (tag) with options to a dynamically created table row

本文关键字：动态 创建 标记 连接 选项 选择 元素      更新时间：2023-09-26

第一个代码块是我希望变量 select 做什么的工作示例。 变量 选择变量 tr 中是否有 td。 变量 tr 在此代码中使用了 2 次。 一次用于在表具有 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

}(;

感谢您的帮助

如果只使用值，为什么要使用对象？如果你真的不需要键，只需创建一个数组：

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 不会返回任何内容，因此无法正常工作。我用你的小提琴测试。试试这个(如果你不想使用map，请用旧的for循环替换(。

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

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

相关文章：