如何從數據庫獲取文本框中的值取決於沒有提交按鈕的下拉列表

Question

我想從數據庫中獲取文本框的值取決於dropdownlist的值而不使用提交按鈕。現在我的代碼上有三個下拉列表。如何為三個下拉列表編寫JavaScript

<div align="center">
<table>
<thead>
<th>Product</th>
<th>Quantity</th>
<th>Rate</th>
<th>Amount</th>
</thead>
<tbody>
    <tr id="addrow">
    <td>
    <?php
    $selectproduct=mysql_query("select productname from items");
    $itemname=mysql_fetch_array($selectproduct);
    ?>
    <select name="item[]" id="item">

    <?php
    $i=0;
    while($itemname=mysql_fetch_array($selectproduct))
    {
    ?>
      <option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
      <?php
     $i++;
    }
    ?>
    </td>
    <?php

 //    $amount=mysql_query("select Amount from items where Productname='$productname' ");
   //  $totalamount=mysql_fetch_array($amount);
    ?>


    <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input type="text" class="output" name="output[]"></td>
    </tr>
    <tr >
    <td>
    <?php
    $selectproduct=mysql_query("select productname from items");
    $itemname=mysql_fetch_array($selectproduct);
    ?>
    <select name="item[]" id="item">

    <?php
    $i=0;
    while($itemname=mysql_fetch_array($selectproduct))
    {
    ?>
      <option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
      <?php
     $i++;
    }
    ?>
    </td>

    <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input type="text" class="output" name="output[]"></td>
    </tr>
    <tr>
    <td>
    <?php
    $selectproduct=mysql_query("select productname from items");
    $itemname=mysql_fetch_array($selectproduct);
    ?>
    <select name="item[]" id="item">

    <?php
    $i=0;
    while($itemname=mysql_fetch_array($selectproduct))
    {
    ?>
      <option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
      <?php
     $i++;
    }
    ?>
    </td>

   <td><input class="qty" type="text" name="qty[]"></td>
    <td><input class="price" type="text" name="price[]"></td>
    <td><input type="text" class="output" name="output[]"></td>
    </tr>
</table>
<div id="grand">
Total Amount:<input type="text" name="gran" id="gran">
</div>
    </tr>
    <tr >
    <td colspan="4">
    <center><input type="submit" name="submit"></center>
    </td>
    </tr>
</tbody>
</table>
</div>
</form>
</body>
<script type="text/javascript">
    $(document).ready(function() {
    $(".price").keyup(function() {
        var grandTotal = 0;
        $("input[name='qty[]']").each(function (index) {
            var qty = $("input[name='qty[]']").eq(index).val();
            var price = $("input[name='price[]']").eq(index).val();
            var output = parseInt(qty) * parseInt(price);

            if (!isNaN(output)) {
                $("input[name='output[]']").eq(index).val(output);
                grandTotal = parseInt(grandTotal) + parseInt(output);    
                $('#gran').val(grandTotal);
            }
        });
    });
}); 
</script>

Answer 1

我建議您使用jQuery作為開始。 操作DOM更容易。 按照教程進行操作，然后在下拉菜單上的change事件上附加一個回調，然后在該回調中通過ajax調用獲取菜單的值，然后生成html（選項標簽）並更新您的選擇。

Ajax調用和html更新可以使用jQuery完成，但是您也可以自己使用純Javascript完成。

Answer 2

您需要使用來自JS的AJAX調用。 AJAX必須從php腳本發送和接收數據。 簡單的AJAX教程： https : //www.w3schools.com/js/js_ajax_php.asp