How to dynamically choose an option from a dynamically populated dropdown

Question

I'm creating a company directory where you can create, read, update and delete entries about employees, departments, and locations. When updating a specific employee, accessed by a button on their employee's row:

You get a modal:

The code for this modal is:

 <div class="modal fade" id="update_employee" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header update_header">
                <h5 class="modal-title" id="exampleModalLongTitle">Update Employee</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        <div id="updatingEmployee_problem" class="alert alert-danger alert-dismissible fade show" role="alert" style="display:none;">
        <p id="description_of_update_problem"></p>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
            <form>
            <div class="modal-body">
                <div id="update_this_id" hidden></div>
            <div class="form-group">
                <label for="name">First Name</label>
                <input class="form-control" id="update_fname">
            </div>
            <div class="form-group">
                <label for="name">Last Name</label>
                <input class="form-control" id="update_lname">
            </div>
            <div class="form-group">
                <label for="job_title">Job Title</label>
                <input class="form-control" id="update_job_title">
            </div>
            <div class="form-group">
                <label for="email">Email address</label>
                <input type="email" class="form-control" id="update_email">
            </div>
            <div class="form-group">
                <label for="department">Department</label>
                <div class="row ml-1">
                    <select data-width="450px" title="Select department" class="selectpicker" id="departmentSearch4" onchange='possibleLocations("#departmentSearch4", "dependentLocation2")'></select>
                </div>
            </div>
            <div class="form-group">
                <label for="location">Location</label>
                <div class="row ml-1">
                    <select data-width="450px" title="Select location" id="dependentLocation2" class="selectpicker"></select>
                </div>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="certainDecision('updateTheEmployee')">
                <label class="form-check-label" for="flexCheckDefault">
                    I am happy with the information provided.
                </label>
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button onclick="updateEmployee()" class="btn btn-primary" id="updateTheEmployee" disabled>Update</button>
            </div>
            </form>
        </div>
    </div>
</div>

Departments can have multiple locations. Therefore, my location dropdowns are dynamically populated depending on which department is chosen.

The code for this is:

function possibleLocations(department, id) {
$.ajax({
    type: 'POST',
    url: 'libs/php/locationOptions.php',
    data: {
        department: $(department + ' option:selected').text()
    },
    success: function (result) {

        while (document.getElementById(id).firstChild) {
            document.getElementById(id).removeChild(document.getElementById(id).lastChild);
        }

        for (let i = 0; i < result.length; i++) {
            var node = document.createElement("OPTION");
            var textnode = document.createTextNode(result[i].name);
            node.value = result[i].id;
            node.appendChild(textnode);
            document.getElementById(id).appendChild(node);
        }
        $('#' + id).selectpicker('refresh');
    }
})
}

I fill in this modal, by executing this code when clicking on the row's edit button:

 function update_this(ele) {
var row = ele.closest('tr');
var data = row.children;
var id = data[0].childNodes[0].data;
$('#update_this_id').text(id);
document.getElementById('update_fname').setAttribute('value', data[1].childNodes[0].data);
document.getElementById('update_lname').setAttribute('value', data[2].childNodes[0].data);
document.getElementById('update_job_title').setAttribute('value', data[3].childNodes[0].data);
document.getElementById('update_email').setAttribute('value', data[4].childNodes[0].data);
$('#departmentSearch4').val(data[5].childNodes[0].data).trigger('change');
$('#dependentLocation2').selectpicker('val', data[7].childNodes[0].data); << TRYING TO SELECT THE EMPLOYEE LOCATION FROM THE DYNAMIC LOCATION DROPDOWN
$('#update_employee').modal('show');
}

As departments can have multiple locations, I would like to automatically select the employee's location from the dynamic dropdown which is populated from the employee's department so that it looks 'filled out'. Any ideas on how I can achieve this?

Answer 1

I figured out one solution!

I can use a setTimeout so that the dropdown list has time to populate before I select the employee's location. I did it with the following code:

function update_this(ele) {
var row = ele.closest('tr');
var data = row.children;
var id = data[0].childNodes[0].data;
$('#update_this_id').text(id);
document.getElementById('update_fname').setAttribute('value', data[1].childNodes[0].data);
document.getElementById('update_lname').setAttribute('value', data[2].childNodes[0].data);
document.getElementById('update_job_title').setAttribute('value', data[3].childNodes[0].data);
document.getElementById('update_email').setAttribute('value', data[4].childNodes[0].data);
$('#departmentSearch4').val(data[5].childNodes[0].data).trigger('change');
setTimeout(function () { $('#dependentLocation2').selectpicker('val', data[7].childNodes[0].data) }, 1);
$('#update_employee').modal('show');
  }

I would still love anyone else's ideas though of how to solve it!