how to bind data to text box according change value of select in php

Question

i have two input field.one is select and another is input type text.

i want to show all district name from the database to select element and i get the id of district name to the text box. please help.hear is my code, i don't understand how to bind district id to text box.

<tr> <td><label>Select District</label></td>
<td>
<select>
<option>--Select--</option>
<?php
$sql = "SELECT * FROM `district`";
$query = mysqli_query($con, $sql);
while ($data = mysqli_fetch_array($query)) {
?>
<option value="<?php echo $data["districtname"]; ?>"> <?php echo $data["districtname"]; ?></option>`enter code here`
 <?php
}
 ?>
 </select>    
     </td>
          </tr>

 <tr>
 <td><label>District ID</label></td>
   <td>
        <input type="text" name="distrctID" disabled="disabled" value="<?php echo $data["DistrictID"]; ?>" />
   </td>
   </tr>

Answer 1

If you want the selected district id should be in the text box then this will help

your option should be like

<option value="<?php echo $data["districtID"]; ?>"><?php echo $data["districtname"]; ?></option>
    <input type="text" name="distrctId" disabled="disabled" id="districtId" />

and a javascript on change of select should be like

$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$('#districtId').val(valueSelected);

});