javascript - Display JS Value in HTML Dropdown as Selected

Question

Good morning,

I am using the javascript code to retrieve my data from my database and display the contents in text fields (HTML). This also works wonderfully. I would like to display the value (no. 6) in a dropdown menu instead of in a text field. The content should be "selected" accordingly. How can I implement this? Unfortunately I do not get further.

Edit: There is a Error Message. Sorry for that. I think it comes from the JS code because it can't assign the variables there, but they work in my original file because they have connections to others there.

$(document).ready(function () {
    $('.editbtn').on('click', function() {
        
        $('#editmodal').modal('show');

        
            $tr = $(this).closest('tr');

            var data = $tr.children("td").map(function() {
                return $(this).text();
            }).get();

            console.log(data);

            $('#update_id').val(data[0]);
                  $('#name').val(data[1]);
                  $('#birth').val(data[2]);
            $('#sex').val(data[3]);
            $('#adress').val(data[4]);
                  $('#number').val(data[5]);
            $('#qualification').val(data[6]);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- *********** Database ***********

<?php

$pdo = new PDO('mysql:host=localhost;dbname=', 'root', '');

$sql = "SELECT * FROM users";
foreach ($pdo->query($sql) as $row7) {
                                                
}
?>

-->

<div class="modal fade" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> User </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

<form action="updatecode.php" method="POST">
<div class="modal-body">
            
 <input type="hidden" name="update_id" id="update_id">
        <div class="form-row">
            <div class="col-6">
                    <label>Name</label>
                        <input type="text" class="form-control" name="name" id="name">
            </div>
            <div class="col-6">
                     <label>Birth</label>
                        <input type="text" name="birth" id="birth" class="form-control">
            </div>
        </div>
        <P>
      <div class="form-row">
        <div class="col-6">
             <label>Sex</label>
               <input type="text" name="sex" id="sex"  class="form-control">
      </div>
      <div class="col-6">
              <label>Adress</label>
                <input type="text" name="adress" id="adress"  class="form-control">
      </div>
      </div>
      <P>
            <div class="form-row">
                 <label>Number</label>
                            <div class="col-12">
                                <input type="text" name="number" id="number" class="form-control">
            </div>
            </div>
            <P>
            <hr>
            <P>
      <div class="form-group">
                <label>Qualification</label>
                 <select class="form-control" name="qualification">
                            //   <?php  if ($row7['qualification'] === "Mechanic"){?> 
                            <option value="Mechanic" selected='selected'>Mechanic</option>
                            <option value="Locksmith">Locksmith</option>
                            <option value="Electriciane">Electrician</option>
                            // <?php }elseif ($row7['qualification'] === "Locksmith"){?>
                            <option value="Mechanic">Mechanic</option>
                            <option value="Locksmith" selected='selected'>Locksmith</option>
                            <option value="Electrician">Electrician</option>
                            //  <?php }elseif ($row7['qualification'] === "Electrician"){?> 
                            <option value="Mechanic">Mechanic</option>
                            <option value="Locksmith">Locksmith</option>
                            <option value="Electrician" selected='selected'>Electrician</option>
              //    <?php } ?> 
           </select>
        </div>
      </div>
    </div>
</div>
<div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times-circle" aria-hidden="true"></i> Close</button>
        <button type="submit" name="updatedata" class="btn btn-success"><i class="fa fa-share" aria-hidden="true"></i>Save</button>
              </div>
        </form>
    </div>
  </div>
</div>

question from:https://stackoverflow.com/questions/66059606/display-js-value-in-html-dropdown-as-selected

Answer 1

I found the solution:

I have to add $('#intervall').find(":selected").text();

Now it works! :)