如何在多行上使用 JavaScript 填充下拉菜单

Question

我正在尝试来自https://www.phpzag.com/build-invoice-system-with-php-mysql/的发票生成系统。在https://phpzag.com/demo/build-invoice-system-with-php-mysql-demo/create_invoice.php上进行演示。一切正常，但作为示例给出的字段只是输入字段。但是，我需要使用我的 mysql 数据库中的选择选项。“htmlRows”中给出的字段应该在用户想要使用 html 表单中的添加按钮时添加。我创建了一个单独的函数来从数据库中提取产品，现在我不知道为什么它们没有被填充到“htmlRows”的选项值中。

       <script type="text/javascript">

             $(document).ready(function(){

                $(document).on('click', '#checkAll', function() {           

                    $(".itemRow").prop("checked", this.checked);

                }); 

                $(document).on('click', '.itemRow', function() {    

                    if ($('.itemRow:checked').length == $('.itemRow').length) {

                        $('#checkAll').prop('checked', true);

                    } else {

                        $('#checkAll').prop('checked', false);

                    }

                });  

                var count = $(".itemRow").length;

                $(document).on('click', '#addRows', function() { 

                    count++;

                  //Load products

                  $.getJSON("load.php?task=products",{ajax: 'true'}, function(j){

                  var options = '<option value="">--------------------------- select -------------------------</option>';

                 count++;

                      for (var i = 0; i < j.length; i++) {

                                options += '<option value="' + j[i].id + '">' + j[i].display + '</option>';

                      }

                      $("select#productCode_'"+count+"'").html(options);

                  }); 

                    var htmlRows = '';

                    htmlRows += '<tr>';

                    htmlRows += '<td><input class="itemRow" type="checkbox"></td>';

                }); 

            </script>   

Answer 1

将您的 javascript 代码替换为以下内容：<script type="text/javascript">$(document).ready(function(){&nbsp; &nbsp; $(document).on('click', '#checkAll', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $(".itemRow").prop("checked", this.checked);&nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; $(document).on('click', '.itemRow', function() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if ($('.itemRow:checked').length == $('.itemRow').length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#checkAll').prop('checked', true);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#checkAll').prop('checked', false);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp;&nbsp;&nbsp; &nbsp; var count = $(".itemRow").length;&nbsp; &nbsp; $(document).on('click', '#addRows', function(options) {&nbsp; &nbsp; &nbsp; &nbsp; count++;&nbsp; &nbsp; &nbsp; &nbsp; //Load products&nbsp; &nbsp; &nbsp; &nbsp; $.getJSON("load.php?task=products",{id: $(this).val(), ajax: 'true'}, function(j){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var options = '<option value="">--------------------------- select -------------------------</option>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < j.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options += '<option value="' + j[i].id + '">' + j[i].display + '</option>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(options);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var htmlRows = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlRows += '<tr>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlRows += '<td><input class="itemRow" type="checkbox"></td>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //This should be a drop down menu&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlRows += '<td><select name="productCode[]" id="productCode_'+count+'" class="form-control" autocomplete="off" style="width:450px;font-weight:bold;">'+options+'</select></td>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlRows += '<td><input type="number" name="quantity[]" id="quantity_'+count+'" class="form-control quantity" autocomplete="off"></td>';&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlRows += '<td><input type="number" name="price[]" id="price_'+count+'" class="form-control price" autocomplete="off"></td>';&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlRows += '<td><input type="number" name="total[]" id="total_'+count+'" class="form-control total" autocomplete="off"></td>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlRows += '</tr>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#invoiceItem').append(htmlRows);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});</script>