複数の行ではJavaScriptを使用してドロップダウンメニューを移入する方法

持参emmal：

、からの請求書生成システムをしようとしています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>';

                    //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;

Ankitシン：

あなたの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>