JQuery 1.11下二级Select选中文本无法清除问题求助

嘿，我太懂你这个困扰了！这其实不是原生JS或jQuery的问题，而是jQuery Mobile的美化机制在搞事情——它会把原生的<select>元素包装成一套自定义的UI组件，你直接修改原生select的内容后，这个美化后的外层容器根本不知道你改了，所以显示的还是旧文本。

问题根源 #

jQuery Mobile为了实现统一的移动端UI，会给原生select生成一个带有ui-select类的容器，里面的显示文本是独立于原生option的。你修改原生option的内容时，这个美化容器不会自动同步更新，就出现了你看到的“下拉列表里的文本变了，但选中显示的没变”的情况。

解决方案：刷新jQuery Mobile的Select组件 #

你只需要在修改完第二个下拉框的选项后，调用jQuery Mobile提供的selectmenu('refresh')方法，强制刷新这个美化组件，就能让显示的文本同步更新了。

步骤1：修改你的change事件处理函数

把刷新方法加到清空和填充操作之后：

$(document).on('change', '#cpEstado', function() {
    // 清空第二个下拉框的所有选项
    $('#cpCidade').empty();
    // 先添加默认的提示选项（可选，根据你的需求保留）
    $('#cpCidade').append('<option value="" disabled selected>Cidade</option>');
    // 调用你的填充城市列表的函数
    appUsuario.buscarCidades(this.value);
    // 关键一步：刷新jQuery Mobile的select组件
    $('#cpCidade').selectmenu('refresh');
});

步骤2：如果是异步加载数据（比如AJAX），要在数据加载完成后刷新

如果你的buscarCidades是通过AJAX请求获取城市数据的，一定要把刷新操作放在请求成功的回调里，确保选项填充完成后再刷新：

appUsuario.buscarCidades = function(estadoId) {
    $.ajax({
        url: '/你的城市接口地址',
        data: { estado: estadoId },
        dataType: 'json',
        success: function(cidades) {
            // 遍历数据填充选项
            $.each(cidades, function(i, cidade) {
                $('#cpCidade').append(`<option value="${cidade.id}">${cidade.nome}</option>`);
            });
            // 数据填充完成后再刷新组件
            $('#cpCidade').selectmenu('refresh');
        }
    });
};

额外技巧：手动设置选中项并刷新

如果需要主动设置某个选项为选中状态并更新显示，不要直接修改option的html，而是用val()设置值后再刷新：

// 设置值为"123"的选项为选中
$('#cpCidade').val('123').selectmenu('refresh');

注意事项 #

• 确保你的jQuery Mobile版本和jQuery 1.11兼容（jQuery Mobile 1.4.x系列和jQuery 1.11是匹配的），不然selectmenu方法可能无法正常使用。
• 不要直接操作jQuery Mobile生成的美化容器（比如带有ui-btn-text类的元素），因为这些是动态生成的，刷新后会被覆盖，一定要通过原生select元素操作后再刷新组件。

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