如何填充多個值<li>標記到輸入字段

Question

我在某處找到了這段代碼，並根據我的需要對其進行了修改，但它僅適用於第一部分。 它應該可以在我向我的訂單添加多個項目的任何時候工作，但它沒有按預期工作。

代碼：

   <script type="text/javascript">
    $(document).ready(function() {
        var max_fields      = 50; //maximum input boxes allowed
        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div class="row"> <hr style="border-top: 3px solid #d71e1e;"><div style="height:183px; overflow:hidden;" class=" col-lg-6" ><label>Item Name</label><input type="text" id="myInput" name="item_name[]" onkeyup="myFunction()"  class="form-control" placeholder="Enter Item Name" ><ul id="myUL" class="list-group"  style="overflow:auto;height:125px;" ><?php $data = $this->inn->show_menu();foreach($data as $key=>$val){ if(!empty($val)){ ?><li  class="list-group-item" ><?php  echo $val->item_name; ?></li><?php } }?></ul></div><div  class=" col-lg-6" ><label>Quantity</label><select class="form-control" name="quantity[]" required><option value="half">Half</option><option value="full">Full</option></select> </div> <br> <a href="#" class="remove_field btn btn-danger btn-md ">Remove This Item</a> </div>'); //add input box
            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });
    </script>




    <div class="container-fluid">

    <div class="row">
      <div class="col-lg-2">
      </div>
      <div class="col-lg-8">
        <h2 class="text-center">Creat Order</h2>
        <hr>

    <form class="form-group" action="<?php echo base_url('home/place_order'); ?>" method="post">

        <div class="form-group col-lg-12">
              <label >Food For</label>
              <br>
              <select class="form-control" name="for" required>

              <option value="outside">Outside</option>
              <option value="zomato">Zomato</option>
              <option value="swiggy">Swiggy</option>

    <?php
    $rooms = $this->inn->show_room_no();
    if (!empty($rooms))
    {
    foreach ($rooms as $rooms)
    {
    ?>
    <option value="<?php echo $rooms->room_no; ?>"><?php echo $rooms->room_no; ?></option>
    <?php
    }
    }
    else {
    ?>
    <option >Choose Room Number if not available add in settings.</option>

    <?php
    }
    ?>
             </select>
        </div>

      <div class="form-group">

        <div class="form-group col-lg-6">
         <label>Item Name</label>
         <input type="text" id="myInput" name="item_name[]" onkeyup="myFunction()"  class="form-control" placeholder="Enter Item Name" >
            <ul id="myUL" class="list-group" style="overflow:auto;height:125px;">
                <?php 
                $data = $this->inn->show_menu();
                foreach($data as $key=>$val)
                {
                if(!empty($val))
                {
                ?>
                  <li  class="list-group-item" id="listval" ><?php  echo $val->item_name; ?></li>
                  <!--<li  class="list-group-item" id="listval" ><a href="#"><?php // echo $val->item_name; ?></a></li>-->
                <?php
                }
                }
                ?>
            </ul> 
        </div>

        <div class="form-group col-lg-6">
        <label>Quantity</label>
        <select class="form-control" name="quantity[]" required>
                <option value="half">Half</option>
                <option value="full">Full</option>
        </select>
        </div>

        </div>

        <div class="form-group input_fields_wrap col-lg-12">
        <button class="add_field_button btn btn-primary">Add More Items</button>
        <br><br>

        </div>
    <button type="submit" class="submit btn btn-success btn-block btn-lg">Place the Order</button>
    </form>
    </div>

    </div>

    </div>

    <script> 
    var items = document.querySelectorAll("#myUL li");

    for ( var i = 0; i < items.length; i++ )
        {
            items[i].onclick = function () {

                document.getElementById("myInput").value = this.innerHTML; 

            };
        }


    </script> 

    <script>
    function myFunction() {
      // Declare variables
      var input, filter, ul, li, a, i, txtValue;
      input = document.getElementById('myInput');
      filter = input.value.toUpperCase();
      ul = document.getElementById("myUL");
      li = ul.getElementsByTagName('li');

      // Loop through all list items, and hide those who don't match the search query
      for (i = 0; i < li.length; i++) {

        a = li[i];
        txtValue = a.textContent || a.innerText;

        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
      }
    }
    </script>

Answer 1

每次添加元素表單時都添加鍵，如下所示：

從 ：

name="item_name[]"

到：

name="item_name[' + x + ']" //x is your key