javascript - 如果下拉值发生变化，则从数据库中获取值并填充所有文本框

Question

我正在尝试根据下拉值选择来填充所有文本框值。而且我还通过 SQL 查询填充下拉值。这是 HTML 代码:

<select name="name" ID="name" class="form-control">
<option value="Select">Select</option>
<?php
$qu="Select DISTINCT Cname from Client_table";
$res=mysqli_query($con,$qu);
while($r=mysqli_fetch_row($res))
{ 
    echo "<option value='$r[0]'> $r[0] </option>";
                                            
}
?> 
</select>
<label>Address</label><input type="text" name="add"/>
<label>Contact</label><input type="text" name="con"/>

数据库:

  Client_table
   C_no             Cname           Caddress          Ccontact
    1               Mohit             xyz             0123645789
    2               Ramesh            abc             7485962110

我很困惑如何根据下拉选择找到客户的地址和联系方式并用这些值填充文本框

Answer 1

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname="stack";
// Create connection
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$conn = new mysqli($servername, $username, $password, $dbname);


$qu = "SELECT DISTINCT Cname,Caddress,Ccontact FROM Client_table";
$res = $conn->query($qu);
?>
<select name="name" ID="name" onchange="myFunction()" class="form-control">
<option value="Select">Select</option>
<?php

while($r = mysqli_fetch_row($res))
{ 
    echo "<option data-add='$r[1]'  data-con='$r[2]'  value='$r[0]'> $r[0] </option>";
}
?> 
</select>
<label>Address</label><input type="text" name="add" id="add"/>
<label>Contact</label><input type="text" name="con" id="con"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


    function myFunction(){
        var address = $('#name').find(':selected').data('add');
        var contact = $('#name').find(':selected').data('con');
        $('#add').val(address);
        $('#con').val(contact);
    }
</script>