如何在多行上使用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数据库中的select选项。当用户想要使用html表单中的add按钮时，应该尽可能多地添加“htmlRows”中给出的字段。我已经创建了一个单独的函数来从数据库中拉出产品，现在我不知道为什么它们没有被填充到“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>   

load.php

            case 'products':
            try
            {
                require_once("connect.php");

                $sql="CALL sp_getProducts()";
                $pdo = new PDOConfig();
                $resultset = $pdo->query($sql);
                foreach($resultset as $row)
                        {
                          $data[] = array(
                                  'id' => $row['ProductID'],
                                  'display' => $row['ProductDetails']
                                  );
                        }
                echo json_encode($data);


            }
                catch(PDOException $e) {
                        die("Could not connect to the database\n");


            }

            break;

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>