如何在MDL下拉选择菜单中显示从服务器获取的动态值？

你遇到的问题是因为MDL的getmdl-select是自定义封装的下拉组件，它的UI状态和DOM元素并不是完全同步的——直接用jQuery的.val()修改输入框值，只是更新了DOM的value属性，但组件本身没有触发UI刷新，也没有同步选中菜单项的状态。

下面是完整的解决方案，既能设置值，又能同步组件的选中状态和UI显示：

实现步骤 #

1. 定位到对应值的菜单项，标记为选中状态
2. 同步更新可见输入框和隐藏域的值
3. 触发MDL组件的升级操作，强制刷新UI

完整代码示例 #

function setStreamSelectedValue(targetValue) {
    // 1. 找到匹配目标值的菜单项
    const targetMenuItem = $('.getmdl-select ul.mdl-menu li.mdl-menu__item[data-val="' + targetValue + '"]');
    
    if (targetMenuItem.length === 0) {
        console.warn('没有找到对应值的Stream选项');
        return;
    }
    
    // 2. 移除其他菜单项的选中状态
    $('.getmdl-select ul.mdl-menu li.mdl-menu__item').removeClass('active');
    // 标记当前菜单项为选中
    targetMenuItem.addClass('active');
    
    // 3. 更新可见输入框和隐藏域的值
    $('#estream').val(targetValue);
    $('#estream2').val(targetValue);
    
    // 4. 触发MDL组件升级，刷新UI
    const selectContainer = document.getElementById('estream').parentNode;
    componentHandler.upgradeElement(selectContainer);
}

// 使用示例：设置值为"lorem"
setStreamSelectedValue("lorem");

为什么原来的方法无效？ #

MDL的自定义组件（比如这个getmdl-select）会在初始化时创建自己的状态管理逻辑，直接修改DOM元素的value属性并不会通知组件更新内部状态，所以UI不会跟着变化。必须手动同步选中状态，并调用MDL的componentHandler.upgradeElement方法，让组件重新渲染UI。

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