如何在动态表中使用datalist？答案

【问题标题】：How to use datalist inside dynamic table?如何在动态表中使用datalist？
【发布时间】：2020-02-01 14:36:40
【问题描述】：

我正在制作添加行的动态表，并且每一行都有数据列表。问题是它在第一行显示文本，但在其他行显示来自 Value 的整数。我想显示数据文本中的文本。

检查我的代码：https://codepen.io/aleksandar095/pen/eYmqYVO

也许我仍然不明白 id 是如何工作的。问题可能出在 js 代码中。

$(document).ready(function() {
    var counter = 2;

    $("#addrow").on("click", function() {

      counter = $('#myTable tr').length - 2;

      var newRow = $("<tr>");
      var cols = "";

      cols += '<td><input list="animals" class="form-control" id="animal'+counter+'" name="animal"><datalist id="animals"><option data-text="cat" value="1">Text 1</option><option data-text="dog" value="2">Text 2</option><option data-text="fish" value="3">Text 3</option></datalist></td>';


      cols += '<td><button type="button" class="ibtnDel btn btn-md btn-danger"><i class="fa fa-trash" style="color: #fff;"></i></button></td>';
      newRow.append(cols);
      $("table.order-list").append(newRow);

      $("#animal" + counter).bind("select", function() {
        if ($('#animals').find('option').length) {
          if ($('option[value=' + this.value + ']').length > 0) {
            $("#animal" + counter).val($('option[value=' + this.value + ']').data("text"));
          }
        }
      })

      counter++;
    });

请在 codepen 上查看我的完整代码。

【问题讨论】：

你的问题我不清楚。
你想显示文本而不是值吗？
我想在文本框中显示文本而不是值。检查 CodePen，您会看到第一行按我的意愿工作，当我添加更多行时它不能正常工作

标签： javascript jquery html

【解决方案1】：

只需更改这些行即可帮助您输出构建的 html。

var newRow = '<tr>'

var cols = '<td><input list="animals" class="form-control" id="animal'+counter+'" name="animal"><datalist id="animals"><option data-text="cat" value="1">Text 1</option><option data-text="dog" value="2">Text 2</option><option data-text="fish" value="3">Text 3</option></datalist></td>';

cols += '<td><button type="button" class="ibtnDel btn btn-md btn-danger"><i class="fa fa-trash" style="color: #fff;"></i></button></td>';
newRow += cols;

$("table.order-list").append(newRow);

或者，更简单：

let newRow = '<tr>'  
newRow += '<td><input list="animals" class="form-control" id="animal'+counter+'" name="animal"><datalist id="animals"><option data-text="cat" value="1">Text 1</option><option data-text="dog" value="2">Text 2</option><option data-text="fish" value="3">Text 3</option></datalist></td>';
newRow += '<td><button type="button" class="ibtnDel btn btn-md btn-danger"><i class="fa fa-trash" style="color: #fff;"></i></button></td>';

$("table.order-list").append(newRow);

【讨论】：