Ajax点击编辑按钮二次无法填充城市下拉框问题怎么解决？

问题原因 #

你遇到的问题是操作下拉框选中状态时使用了错误的方法导致的：

1. 你使用attr()设置selected属性，attr()操作的是HTML标签的初始静态属性，第一次给某个option添加selected属性后，第二次赋值时旧的selected属性不会被自动清除，浏览器会识别到多个带有selected属性的option，默认选中第一个匹配项，导致第二次赋值失效。
2. 使用:contains匹配城市名称存在精度风险，出现重名、名称带特殊字符的情况时会匹配失败，优先使用城市ID匹配更稳妥。

修复方案 #

最优方案（接口返回城市ID时使用）

直接通过下拉框的val()方法赋值，jQuery会自动匹配对应value的option选中，无需手动操作selected属性：

$(document).on('click', '#edit_area', function(e) {
    e.preventDefault();
    $('#addArea').hide();
    $('#updateArea').show();
    var area_id = $(this).val();

    $.ajax({
        type: "GET",
        url: "/edit-area/" + area_id,
        success: function(response) {
            if (response.status == 400) {
                // 此处保留原有逻辑
            } else {
                $('#area_id').val(area_id);
                $('#areaName').val(response.area[0].area_name);
                // 直接赋值对应城市ID即可
                $('#selectCity').val(response.area[0].city_id);
            }
        }
    });
});

兼容方案（仅能获取城市名称时使用）

先清空已有选中状态，再使用prop()方法设置当前选中状态，prop()操作的是元素的动态运行时属性，更适合操作表单选中状态：

$('#area_id').val(area_id);
$('#areaName').val(response.area[0].area_name);
// 先重置所有选中状态
$('#selectCity').find('option').prop('selected', false);
// 匹配对应城市后设置选中
$('#selectCity').find("option:contains(" + response.area[0].city_name + ")").prop('selected', true);

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