Laravel+Ajax编辑表单中依赖下拉框（Ville）无法选中值的问题排查

你的问题根源在于异步操作的时序问题加上Select2组件的状态同步没做好，具体来说：

1. 当你触发$('#pays').trigger('change')时，加载城市的AJAX请求是异步执行的——也就是说，代码会继续往下走，直接执行$('#ville').val(html.data.ville)，这时候城市的下拉选项还没被渲染到DOM里，自然没法选中。
2. 即使选项已经存在，因为你用了Select2组件，直接修改原生<select>的val后，Select2不会自动同步选中状态，需要手动通知它更新。

修复步骤 #

1. 调整编辑脚本的异步逻辑

把设置城市选中值的操作，放到城市选项加载完成的回调里，确保DOM已经有对应的选项了再设置值。

修改你的编辑脚本：

$(document).on('click', '.edit', function() {
    var id = $(this).attr('id');
    $('#form_result').html('');
    $.ajax({
        url: "castingss/" + id + "/edit",
        dataType: "json",
        type: "GET",
        success: function(html) {
            // 先设置国家选中状态
            $('#pays').val(html.data.pays);
            var countryId = $('#pays').find("option:selected").data("id");
            
            // 手动调用城市加载逻辑，在完成后设置选中值
            $.get('/getState/' + countryId, function(data) {
                $("#ville").html(data);
                // 设置城市值并同步Select2状态
                $('#ville').val(html.data.ville).trigger('change.select2');
            });
        }
    });
});

2. 确保城市选项的value与返回值完全匹配

检查后端返回的城市选项的value属性，是否和html.data.ville的内容完全一致（包括大小写、空格、特殊字符）。比如如果后端返回的是<option value="adrar">Adrar</option>，但html.data.ville是"Adrar"，就会匹配失败。

你的后端代码里是用$state->name作为value，所以要确保html.data.ville的值和$state->name完全相同。

3. （可选）优化城市加载函数（推荐）

把城市加载逻辑封装成一个返回Promise的函数，代码会更清晰：

function loadCitiesByCountry(countryId) {
    return $.get('/getState/' + countryId);
}

// 编辑脚本里使用
$(document).on('click', '.edit', function() {
    var id = $(this).attr('id');
    $('#form_result').html('');
    $.ajax({
        url: "castingss/" + id + "/edit",
        dataType: "json",
        type: "GET",
        success: function(html) {
            $('#pays').val(html.data.pays);
            var countryId = $('#pays').find("option:selected").data("id");
            
            loadCitiesByCountry(countryId)
                .done(function(data) {
                    $("#ville").html(data);
                    $('#ville').val(html.data.ville).trigger('change.select2');
                })
                .fail(function() {
                    // 处理加载失败的情况，比如提示用户
                    $("#ville").html('<option value="">加载城市失败</option>');
                });
        }
    });
});

为什么原来的代码不行？ #

原来的$('#pays').trigger('change')会触发城市加载，但这个加载是异步的——浏览器不会等它完成，就直接执行后面的$('#ville').val(...)，这时候<select id="ville">里还是空的，自然选不中任何值。

而通过把设置值的逻辑放到$.get的回调里，我们确保了只有当城市选项已经被渲染到DOM中后，才去设置选中值，同时用trigger('change.select2')通知Select2组件更新它的UI状态，这样就能正常显示选中的城市了。

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