求助：将多选国家-州级联下拉JQuery代码修改为单选版本

下面是修改后的单选版本代码，核心改动是移除多选插件依赖、调整表单元素属性、更换事件监听逻辑：

<script src="js/jquery.js"></script>

<label for="country">国家</label>
<?php include "fetch_country.php"; ?>
<select id="country" name="country" class="form-control">
    <option value="" label="请选择国家">请选择国家</option>
    <option value="India" label="印度">印度</option>
    <option value="USA" label="美国">美国</option>
    <option value="UK" label="英国">英国</option>
    <option value="Canada" label="加拿大">加拿大</option>
    <option value="China" label="中国">中国</option>
</select>

<div class="col-sm-6">
    <label for="state">州/省份</label>
    <select id="state" name="state" class="form-control">
        <option disabled>请先选择国家</option>    
    </select>

    <button class="myButnsbmt" type="submit" name="update" value="Update">提交</button>
</div>
</form>

<script>
$(document).ready(function(){
    // 监听国家选择变化
    $('#country').on('change', function(){
        var selectedCountry = $(this).val();
        if(selectedCountry)
        {
            $.ajax({
                url:"fetch_country.php",
                method:"POST",
                data:{selected: selectedCountry},
                success:function(data)
                {
                    // 替换州下拉框内容
                    $('#state').html(data);
                }
            })
        } else {
            // 未选择国家时重置州下拉框
            $('#state').html('<option disabled>请先选择国家</option>');
        }
    });
});
</script>

关键修改说明： #

• 移除了bootstrap-multiselect插件的引入，单选场景无需该插件的多选样式与功能
• 去掉两个下拉框的multiple属性，将name从数组格式（country[]/state[]）改为普通字段（country/state）
• 给国家下拉框添加默认空选项，优化用户选择引导
• 替换原multiselect初始化逻辑为普通change事件监听
• 调整AJAX参数传递：单选场景下selected为单个字符串值，需确保后端fetch_country.php能正确接收单个国家值并返回对应州数据

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