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

我正在从尝试发票生成系统。演示。一切正常，但作为示例给出的字段只是输入字段。但是，我需要使用mysql数据库中的select选项。“htmlRows”中给出的字段应该在用户希望使用html表单中的add按钮时添加。我已经创建了一个单独的函数，用于从数据库中提取产品，现在我不知道为什么没有在“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>';

                    //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;"> <option value="">--------------------------- select -------------------------</option></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>   

---

将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>

---

将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>

---

你能告诉我{id:$this.val，ajax:'true'}中的$this.val是什么吗？嗨@AnkitSingh，它没有任何用途。我们甚至可以有{ajax:'true'}。我已经编辑过了。因为SQL不需要任何变量。你能告诉我{id:$this.val，ajax:'true'}中的$this.val是什么吗？嗨@AnkitSingh，它没有任何用途。我们甚至可以有{ajax:'true'}。我已经编辑过了。因为SQL不需要任何变量。