如何在多行上使用 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(){

    $(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(options) {

        count++;

        //Load products

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

            count++;

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

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

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

            }

            console.log(options);

            var htmlRows = '';

            htmlRows += '<tr>';

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

            //This should be a drop down menu

            htmlRows += '<td><select name="productCode[]" id="productCode_'+count+'" class="form-control" autocomplete="off" style="width:450px;font-weight:bold;">'+options+'</select></td>';           

            htmlRows += '<td><input type="number" name="quantity[]" id="quantity_'+count+'" class="form-control quantity" autocomplete="off"></td>';        

            htmlRows += '<td><input type="number" name="price[]" id="price_'+count+'" class="form-control price" autocomplete="off"></td>';      

            htmlRows += '<td><input type="number" name="total[]" id="total_'+count+'" class="form-control total" autocomplete="off"></td>';          

            htmlRows += '</tr>';

            $('#invoiceItem').append(htmlRows);

        });

    });

});

</script>