如何从 datalist 下拉列表中多次选择值并将值每次存储在表中的新行中？答案

【问题标题】：How can i select values from datalist dropdown multiple times and store the value each time in a new row in table?如何从 datalist 下拉列表中多次选择值并将值每次存储在表中的新行中？
【发布时间】：2019-07-25 17:23:12
【问题描述】：

我正在设置一个新网页，我想从数据列表下拉列表中选择值并将其存储在表格行中，但是当我第二次从同一个数据列表中选择值时，先前的值被替换，而不是我想要选择的值第二次从datalist存储在表的第二行？我怎样才能做到这一点？

我尝试将在数据列表中选择的值添加到表行中，该表行添加到表行中，但是当我第二次从同一数据列表中选择一个值时，前一个值被替换，但我希望将第二个值存储在表格的第二行，我该如何实现？

<input list="browa" name="adv">

   <datalist id="browa">

          <option value="Twice a Day">
          <option value="Thrice a Day">
          <option value="After meal">
          <option value="Before meal">
          <option value="Once a Day">

   </datalist>

  <input list="brown" name="dose">

      <datalist id="brown">

           <option value="Morning">
           <option value="Afternoon">
           <option value="Evening">
           <option value="Night">

      </datalist> 

</div>

 <table style="width:100%; margin-top:10px;">
    <tr>

       <th>Advice</th>

       <th>Dose</th>                                          
   </tr>

   <tr>

      <td id="adv"></td>
      <td id="dose"></td>

   </tr>

  </table>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>

            $("input[name=adv]").on('change', function () {
                $("#adv").text($(this).val());
            });

            $("input[name=dose]").on('change', function () {
                $("#dose").text($(this).val());
            });
  </script>

到目前为止，我得到了这样的结果 (https://ibb.co/2nfTV1N)，但我想要这样的结果 (https://ibb.co/YLhCrgk)。请告诉我该怎么做？

【问题讨论】：

标签： javascript jquery html asp.net

【解决方案1】：

是的，值正在被替换，因为您只是在设置 .text 属性。您应该使用 .append 或 .add，或者一些不会覆盖的方法。

如果您希望它附加一个实际的新网格行，则创建一个新元素，该元素是填充了正确值的网格行。然后，追加新元素

【讨论】：

append 正在做的工作，但在同一行获得值，如果我想要下一行的第二个值该怎么办？

【解决方案2】：

$("input[name=adv]").on('change', function() {
    $("#adv").append($("<tr><td></td></tr>")
             .text($(this).val()));
});

【讨论】：