Php/mysql Selecting data from table based on the input provided in a drop down

I am basically trying to select data from the backend mysql database based on the input gathered in a previous drop down. However, I am not able to get this working. Looks like I am missing something, but unable to figure that out!!

Here is the code snippet that I am trying..

376               <div class="col-md-4"><label for="doctor">Doctors:</label></div>
377                 <div class="col-md-8">
378                     <select name="doctor" class="form-control" id="doctor" required="required">
379                       <option value="" disabled selected>Select Doctor</option>
380 
381                       <?php display_medis(); ?>
382                     </select>
383                   </div><br/><br/>
384 
385 
386                         <script>
387               document.getElementById('doctor').onchange = function updateFees(e) {
388                       var selection = document.querySelector(`[value=${this.value}]`).getAttribute('data-value');
389                       document.getElementById('docFees').value = selection;
390               };
391             </script>
392 
393 
394                   <div class="col-md-4"><label for="consultancyfees">
395                                 Consultancy Fees
396                               </label></div>
397                               <div class="col-md-8">
398                               <!-- <div id="docFees">Select a doctor</div> -->
399                               <input class="form-control" type="text" name="docFees" id="docFees" readonly="readonly"/>
400                   </div><br><br>

Function code

function display_medis()
{
 global $con;
 $query = "select med_name,med_id,mrp from med_inv";
 $result = mysqli_query($con,$query);
 while( $row = mysqli_fetch_array($result) )
 {
  $med_name = $row['med_name'];
  $mrp = $row['mrp'];
  $med_id=$row['med_id'];
  echo '<option value="' .$med_name. '" data-value="'.$mrp.'" >'.$med_name.'</option>';
  //echo '<option value="' .$med_name. '" data-value="'.$mrp.'" data-spec="'.$med_id.'">'.$med_name.'</option>';
  //echo '<option value="' .$med_name. '" >'.$med_name.'</option>';
  //echo '<option value="' .$mrp. '" >'.$mrp.'</option>';
 }
}

Any suggestions.

![Screenshot]enter image description here

Answer

There is some syntax problem in your original JS script to process the select drop-down selected value.

Please change

<script>
document.getElementById('doctor').onchange = function updateFees(e) {
var selection = document.querySelector(`[value=${this.value}]`).getAttribute('data-value');
document.getElementById('docFees').value = selection;
};
</script>

to

<script>
document.getElementById('doctor').onchange = function updateFees(e) {
var selection=this.selectedOptions[0].getAttribute('data-value');
document.getElementById('docFees').value = selection;
};
</script>

Sandbox link (working):

http://www.createchhk.com/SOanswers/SOtest5Oct2022.html