如何多次从数据列表下拉列表中选择值，然后每次将值存储在表的新行中？

Question

我正在设置一个新的网页，我想从数据列表下拉列表中选择值并将其存储在表行中，但是当我第二次从同一数据列表中选择值时，以前的值将被替换，而不是我希望第二次从中选择值数据列表存储在表的第二行？ 我该如何实现？

我试图添加在表行的数据列表中选择的值，该值正在表行中添加，但是当我第二次从同一数据列表中选择一个值时，以前的值被替换了，但我希望第二个值存储在第二行中一张桌子，我怎么能做到这一点？

<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 ）。 请告诉我该怎么做？

Answer 1

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

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

Answer 2

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