单击选择时自动完成现有文本框

Question

我有一个表单，其中有选择选项和一个文本框。我想要做的就是当我选择特定选项时，它会传递 id 来查询同一个表，以根据所选选项的 ID 获取另一列的值，然后在插入/更新表之前在文本框中显示该值。

如果我的表单中的两个字段都使用选择字段，则此代码将起作用。所以在我看来，也许我在输入文本字段中存储值的脚本是完全错误的。如果我做错了，请纠正我。

我的表单代码：

    <form name="inserform" method="POST">
      <label>Existing Customer Name : </label>
         <select name="existCustName" id="existCustName">
             <option value="">None</option>
                 <?php
                 $custName = $conn->query("SELECT * FROM customers");
                 while ($row = $custName->fetch_assoc())
                 {
                     ?><option id="<?php echo $row['customerID']; ?>" value="<?php echo $row['customerID']; ?>"><?php echo $row['customerName']; ?></option><?php
                 }
                 ?>
         </select>br>

      <label>Current Bottle Balance : </label>
         <input type="int" id="currentBal" name="currentBal"></input><br>

      <input name="insert" type="submit" value="INSERT"></input>
    </form>

我的脚本代码：

<script type="text/javascript">
    $(document).on("change", 'select#existCustName', function(e) {
        var existCustID = $(this).children(":selected").attr("id");
        $.ajax({
            type: "POST",
            data: {existCustID: existCustID},
            url: 'existingcustomerlist.php',
            dataType: 'json',
            success: function(json) {
                var $el = $("input#currentBal");
                $el.empty();
                $.each(json, function(k, v) {
                    $el.append("'input[value='" + v.currentBal + "']").val();
                });
            }
        });
    });
</script>

现有customerlist.php 代码：

 <?php 
    include 'config/config.php';
    $result = $conn->query("SELECT * FROM customers WHERE customerID = '" .$_POST['existCustID'] . "'");
    $results = [];
    while ($row = $result->fetch_assoc()) {
        $results[] = $row;
    }
    header('Content-Type: application/json');
    echo json_encode($results); 
 ?>

我需要帮助来解决这个问题。

Answer 1

我假设您正在尝试将结果显示为 #currentBal 元素旁边的输入文本元素。尝试更改成功回调中的脚本标记，如下所示。

$.each(json, function (k, v) {
   $el.after("<input type='text' class="currentBalTemp" value='" + v.currentBal + "' />");
});

确保在选择更改事件时删除 .currentBalTemp 元素，否则将显示重复。在更改事件上添加以下代码。

$('.currentBalTemp').remove();