jQuery修改下拉框选中项后显示文本不更新该如何解决？

数据老陈

2026-10-2

Bootstrap Select下拉框选中值修改后显示不同步解决方案

根本原因

你使用的是经过Bootstrap Select组件美化封装的下拉框，该组件会基于原生<select>生成独立的展示层DOM，仅修改原生select的option选中属性不会自动同步到展示层，因此会出现下拉列表内选项已选中、但顶部展示文本未更新的问题。

解决方案（推荐）

直接调用Bootstrap Select提供的官方刷新方法即可完成同步，无需遍历option手动修改selected属性，优化后代码如下：

function setPhotoStage(photoStageId) {
    // 直接为下拉框设置目标选中值
    $("[id*=drpPhotoStages]").val(photoStageId);
    // 调用组件刷新方法，同步更新展示层文本
    $("[id*=drpPhotoStages]").selectpicker('refresh');
}

备选方案（手动同步展示内容）

如果特殊场景下官方方法无法生效，可直接修改展示层DOM的文本内容：

function setPhotoStage(photoStageId) {
    const $dropdown = $("[id*=drpPhotoStages]");
    $dropdown.val(photoStageId);
    // 获取选中项的文本，手动更新到展示区域
    const selectedText = $dropdown.find("option:selected").text();
    $dropdown.siblings(".dropdown-toggle").find(".filter-option-inner-inner").text(selectedText);
}