如何从数据库获取文本框中的值取决于没有提交按钮的下拉列表

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