Laravel 8中点击编辑按钮通过Ajax设置Select下拉框选中值失败如何解决

问题原因 #

你目前的写法不生效的核心原因是：
你的<select>下拉框的<option>的value属性绑定的是城市ID {{ $city->id }}，但你调用$('#selectCity').val()的时候传的是城市名称response.area[0].city_name，值类型不匹配自然找不到对应的option，也就无法设置选中。

解决步骤 #

1. 首先确保你/edit-area/{id}接口返回的response.area数据里包含关联的城市ID字段，一般命名为city_id，如果你返回的area对象里没有这个字段，需要先修改后端的查询逻辑，把关联的city_id一并返回。
2. 把Ajax回调里的赋值代码改成用城市ID赋值即可，修改后代码如下：

// 原来的错误写法
// $('#selectCity').val(response.area[0].city_name);
// 修改后的正确写法
$('#selectCity').val(response.area[0].city_id);

3. 如果你的后端确实没返回city_id，非要用城市名称匹配也可以，但是不推荐这种写法，性能和准确性都不如用ID匹配，参考写法：

const targetCityName = response.area[0].city_name;
$('#selectCity option').each(function() {
    if ($(this).text() === targetCityName) {
        $(this).prop('selected', true);
        break;
    }
});

可选排查步骤 #

如果修改后还是不生效，可以按以下顺序排查：

• 打开浏览器控制台，打印response.area[0]确认返回的字段是否符合预期，有没有city_id字段
• 打印$('#selectCity option')确认下拉选项已经渲染完成，不存在动态加载还没渲染完就赋值的情况
• 如果是用了select2之类的下拉增强插件，赋值后需要调用$('#selectCity').trigger('change')触发更新

内容的提问来源于stack exchange，提问作者Moshiul Gazi