javascript - Jquery AJAX显示具有相同类的每个选择标签的onchange数据库记录

Question

我是编程新手。我有一个由 php 填充的选择元素。 我有一个函数可以将此选择标签附加到 div 内。

我想要做的是每当 select 元素上触发 onchange 事件时，它将在每个文本框中显示数据库记录。

我已经使用单个 id 属性做到了这一点。但如何使用 class 属性在其他附加元素上执行此操作？

下面是我的代码。

HTML 代码:

<input type='button' value='Add Another Product' id='aprod'>
<table id='page3_inside'>
                        <tr id='ln1'>
                            <td>
                                <label for="product_name">Product Name</label><br>
                                <select class='input' style='width:150px; height:34px;' id='name_of_product' name="name_of_product[]">
                                    <option value="">Select from List</option>
                                    <?php
                                    $qry = $handler->prepare('SELECT * FROM product_list WHERE plist_compid = ?');
                                    $qry->execute(array($id));

                                    while($row = $qry->fetch(PDO::FETCH_ASSOC)){
                                        $pname = $row['plist_name'];

                                    echo "<option value='$pname'>$pname</option>";
                                    }

                                    ?>
                                </select>
                            </td>

                            <td>
                                <label for="product_cat">Product Category</label><br>
                                <select class="input" id="product_category" name="product_category[]" style="font-family:verdana; width:150px; height:34px; border: 1px solid #000000;">
                                          <optgroup label="Apparel">
                                             <option value="Footwear">Footwear</option>
                                             <option value="Underwear">Underwear</option>
                                             <option value="Outerwear">Outerwear</option>
                                             <option value="Cloth">Cloth</option>
                                             <option value="Jewelry">Jewelry</option>
                                             <option value="Headwear">Headwear</option>
                                             <option value="Eyewear">Eyewear</option>
                                             <option value="Legwear">Legwear</option>
                                             <option value="Blanket">Blanket</option>
                                             <option value="Carpet">Carpet</option>
                                             <option value="Sport Series">Sport Series</option>
                                          </optgroup>

                                </select>
                            </td>

                            <td>
                                <label for="qty">Qty</label><br>
                                <input type="text"  value="" class="input" style="width:100px;" id="qty" name="qty[]" placeholder="Qty" onkeypress="return isNumberKey(event)"/>  
                            </td>

                            <td>
                                <label for="unit">Unit</label><br>
                                <select class="input" style="width:100px;height:34px;" id="unit" name="unit[]">
                                    <option value="Piece/s" disabled>Piece/s</option>
                                    <option value="Roll/s" disabled>Roll/s</option>
                                    <option value="Set/s" disabled>Set/s</option>
                                    <option value="Pair/s" disabled>Pair/s</option>
                                    <option value="Box/es" disabled>Box/es</option>
                                </select>

                            </td>
                            <td>
                                <label for="brand">PO Number</label><br>
                                 <input type="text" value="" class="input" id="po" name="po[]" placeholder="PO Number" style='width:150px; height:28px;'/>
                            </td>
                            <td>
                                <img src='htm_files/del.png' class='del' width='30px' style='cursor:hand;cursor:pointer;'>
                            </td>
                        </tr>

                    </table>

JQUERY 代码

$('#name_of_product').on('change', function(event){
    event.preventDefault();
    var prodname = $(this).val();
    var cid = $('#compid').val();
    $.ajax({
        url : 'ajaxrequests.php',
        type : 'POST',
        datatype : 'JSON',
        data : {
                psearch : 1,
                product : prodname,
                compid : cid
            },
        success : function(show){
            $('#name_of_product').val(show.plist_name);
            $('#product_category').val(show.plist_category);
            $('#Category_of_the_Product').val(show.plist_category);
            $('#PO').val(show.plist_po);
            $('#brand').val(show.plist_brand);
            }
    });                 
});


$('#aprod').on('click', function() {
    $('#ln1').clone().appendTo('#page3_inside');
    prodnum = prodnum + 1;
    $('#conf_prodnum').val(prodnum);
});

ajaxrequests.php

 if (isset($_POST['psearch'])) {
    if (!empty($_POST['product']) && !empty($_POST['compid'])) {
        $showprod = $_POST['product'];
        $showid = $_POST['compid'];
        $qry = $handler->prepare("SELECT * FROM product_list WHERE plist_name = ? AND plist_compid = ?");
        $qry->execute(array($showprod,$showid));
        $rows = $qry->fetch(PDO::FETCH_ASSOC);
        header("Content-type: text/x-json");
        echo json_encode($rows);
        exit();
    }
}

谢谢..

Answer 1

然后您需要复制 id 名称定义并粘贴到 html 的类定义中，如下所示(请参阅类属性):

<input type='button' value='Add Another Product' id='aprod'>
<table id='page3_inside'>
                    <tr id='ln1'>
                        <td>
                            <label for="product_name">Product Name</label><br>
                            <select class='input name_of_product' style='width:150px; height:34px;' id='name_of_product' name="name_of_product[]">
                                <option value="">Select from List</option>
                                <?php
                                $qry = $handler->prepare('SELECT * FROM product_list WHERE plist_compid = ?');
                                $qry->execute(array($id));

                                while($row = $qry->fetch(PDO::FETCH_ASSOC)){
                                    $pname = $row['plist_name'];

                                echo "<option value='$pname'>$pname</option>";
                                }

                                ?>
                            </select>
                        </td>

                        <td>
                            <label for="product_cat">Product Category</label><br>
                            <select class="input product_category" id="product_category" name="product_category[]" style="font-family:verdana; width:150px; height:34px; border: 1px solid #000000;">
                                      <optgroup label="Apparel">
                                         <option value="Footwear">Footwear</option>
                                         <option value="Underwear">Underwear</option>
                                         <option value="Outerwear">Outerwear</option>
                                         <option value="Cloth">Cloth</option>
                                         <option value="Jewelry">Jewelry</option>
                                         <option value="Headwear">Headwear</option>
                                         <option value="Eyewear">Eyewear</option>
                                         <option value="Legwear">Legwear</option>
                                         <option value="Blanket">Blanket</option>
                                         <option value="Carpet">Carpet</option>
                                         <option value="Sport Series">Sport Series</option>
                                      </optgroup>

                            </select>
                        </td>

                        <td>
                            <label for="qty">Qty</label><br>
                            <input type="text"  value="" class="input qty" style="width:100px;" id="qty" name="qty[]" placeholder="Qty" onkeypress="return isNumberKey(event)"/>  
                        </td>

                        <td>
                            <label for="unit">Unit</label><br>
                            <select class="input unit" style="width:100px;height:34px;" id="unit" name="unit[]">
                                <option value="Piece/s" disabled>Piece/s</option>
                                <option value="Roll/s" disabled>Roll/s</option>
                                <option value="Set/s" disabled>Set/s</option>
                                <option value="Pair/s" disabled>Pair/s</option>
                                <option value="Box/es" disabled>Box/es</option>
                            </select>

                        </td>
                        <td>
                            <label for="brand">PO Number</label><br>
                             <input type="text" value="" class="input po" id="po" name="po[]" placeholder="PO Number" style='width:150px; height:28px;'/>
                        </td>
                        <td>
                            <img src='htm_files/del.png' class='del' width='30px' style='cursor:hand;cursor:pointer;'>
                        </td>
                    </tr>

                </table>

JS函数应该是:

// this selector should change into event delegation dynamically added element
$('#page3_inside').on('change','.name_of_product', function(event){
  event.preventDefault();
  var prodname = $(this).val();
  var cid = $('#compid').val();  // not found this in html

 // should use this to find parent for current element, 
 // and this is the main part(to find only current match element)
  var $this = $(this).closest('tr'); 

  $.ajax({
    url : 'ajaxrequests.php',
    type : 'POST',
    datatype : 'JSON',
    data : {
            psearch : 1,
            product : prodname,
            compid : cid
        },
    success : function(show){

       // using $this as this would refer to previous context,
       // and find the sibling element only
       // Here you need to find element to attach the data
       // i could't find the match id in your html snippet
       // try this first

        $this.find('.name_of_product').val(show.plist_name);
        $this.find('.product_category').val(show.plist_category);
        $this.find('.Category_of_the_Product').val(show.plist_category);
        $this.find('.PO').val(show.plist_po);
        $this.find('.brand').val(show.plist_brand);
        }
 });                 
});


$('#aprod').on('click', function() {

  // Better use .first() to copy the first tr element
  // $('#ln1').first().clone().appendTo('#page3_inside');
  // change if you want

  $('#ln1').clone().appendTo('#page3_inside');
  prodnum = prodnum + 1;
  $('#conf_prodnum').val(prodnum);
});