如何从动态填充的下拉列表中动态选择一个选项

Posted 2023-05-08

【中文标题】如何从动态填充的下拉列表中动态选择一个选项

【英文标题】：How to dynamically choose an option from a dynamically populated dropdown

【发布时间】：2021-07-16 21:40:54

【问题描述】：

我正在创建一个公司目录，您可以在其中创建、读取、更新和删除有关员工、部门和位置的条目。更新特定员工时，可通过其员工行上的按钮访问：

你得到一个模态：

这个模态的代码是：

 <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- 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- 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>

部门可以有多个位置。因此，我的位置下拉列表会根据选择的部门动态填充。

代码如下：

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');
    
)

我通过单击行的编辑按钮时执行此代码来填充此模式：

 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');

由于部门可以有多个位置，我想从员工部门填充的动态下拉列表中自动选择员工的位置，使其看起来“已填写”。关于如何实现这一目标的任何想法？

【参考方案1】：

我想出了一个解决方案！

我可以使用 setTimeout 以便在我选择员工的位置之前有时间填充下拉列表。我用以下代码做到了：

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');
  

尽管如何解决它，我仍然会喜欢其他人的想法！