如何将动态 selected 选项添加到动态填充的 select 列表？

Question

我正在尝试将 select 菜单的 selected 选项文本设置为 location 的任何内容 - 此参数已传递到 updateDepartment从先前的 PHP 请求动态运行。

调用另一个 PHP 文件后的 AJAX 函数动态填充 #editDepartmentLocation select 菜单，其中包含 text/value 选项对列表。此列表中的 name 之一将始终匹配传递给函数的任何 location 参数。

我可以将 #editDepartmentName 的值设置为名称参数，因为这只是一个文本输入，但是当我尝试添加 $("#editDepartmentName").val(location) 时，这不起作用并且 selected 选项默认为列表顶部的项目，即使列表中存在 location 的值。

有办法解决这个问题吗？

感谢您的帮助。

JS:

function updateDepartment(name, id, location) {

    $.ajax({
        url: "libs/php/getLocation.php",
        type: 'GET',
        dataType: 'json',
        success: function (result) {
            console.log(result);
            if (result.status.name == "ok") {
                $.each(result.data, i => {
                    $('#editDepartmentLocation').append($("<option>", {
                        text: result.data[i].name,
                        value: result.data[i].id,
                    }));
                });
            };
        },
        error: function (error) {
            console.log(error);
        }
});

    $("#editDepartmentName").val(name);
    $("#editDepartmentLocation").val(location);

HTML:

<div class="form-group">
                <label for="name">Name:</label>
                <input type="text" value="" class="form-control" id="editDepartmentName" required>
              </div>
              <br>
              <div class="form-group">
                <label for="location">Location:</label>
                <select class="form-control custom-select" id="editDepartmentLocation" required>
                </select>
                </div>

Answer 1

Ajax 是异步的，因此“editDepartmentLocation”很可能尚未填充。尝试移动：

$("#editDepartmentName").val(name);
$("#editDepartmentLocation").val(location);

成功函数内部。或者像这样进行比较：

var option =  $("<option>", {
                    text: result.data[i].name,
                    value: result.data[i].id,
});

if (result.data[i].id == location){
    option.attr("selected", "selected");
}

$('#editDepartmentLocation').append(option);

如何将动态 selected 选项添加到动态填充的 select 列表？

How to add dynamic selected option to a dynamically populated select list?

javascript

ajax

jquery

html-select

drop-down-menu