Laravel 9中如何获取联动下拉框的城市选中值？

你需要在页面初始化时，根据已保存的州ID加载对应城市，并自动选中已保存的城市，具体修改如下：

1. 在Blade中传递已保存的城市ID #

在你的script代码开头，先定义一个变量存储已保存的城市ID（新增页面则默认设为0）：

var savedCityId = {{ $vendorDetails['city'] ?? 0 }};

2. 重构JS代码，复用加载城市的逻辑 #

把加载城市的逻辑封装成函数，方便页面初始化和州切换时调用，同时在渲染城市选项时判断是否为已保存的城市：

<script type="text/javascript">
var savedCityId = {{ $vendorDetails['city'] ?? 0 }};

$(document).ready(function () {
    // 封装加载城市的函数
    function loadCities(stateId) {
        $('#vendor_city').html('');
        $.ajax({
            headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url: '{{ route('cities') }}?state_id='+stateId,
            type: 'get',
            success: function (res) {
                var dropdown = $('#vendor_city');
                dropdown.html('<option selected disabled value="">Select City</option>');
                $.each(res, function (key, value) {
                    // 判断当前城市是否为已保存的，添加selected属性
                    var selectedAttr = (value.id === savedCityId) ? 'selected' : '';
                    dropdown.append(`<option value="${value.id}" ${selectedAttr}>${value.name}</option>`);
                });
            }
        });
    }

    // 监听州下拉框的切换事件
    $('#vendor_state').on('change', function () {
        var stateId = this.value;
        savedCityId = 0; // 切换州后重置选中的城市ID
        loadCities(stateId);
    });

    // 页面初始化时，如果州已有选中值，自动加载对应城市并选中已保存项
    var initialStateId = $('#vendor_state').val();
    if (initialStateId) {
        loadCities(initialStateId);
    }
});
</script>

关键说明 #

• 页面加载完成后，先检查州下拉框是否有选中值（编辑场景下的已保存州ID），如果有就主动调用loadCities函数获取对应城市列表。
• 在渲染城市选项时，通过对比value.id和savedCityId，给已保存的城市选项添加selected属性，实现回显。
• 切换州时重置savedCityId，避免切换州后错误选中之前的城市。

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