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>

Answer 1

I found the solution:

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

Now it works: :)