ASP.NET使用jQuery Chosen时下拉框无法同时显示Name与Id问题

问题现象 #

使用jQuery Chosen插件对asp:Dropdownlist控件做样式美化时，参考同逻辑项目实现后出现下拉选项显示异常：参考项目的下拉列表项会在Name内容后用括号附带展示对应Id，当前实现下拉列表仅显示Name字段内容，Id无法正常展示。

现有实现代码 #

依赖引入代码 #

<script type="text/javascript" src="../Scripts/jquery-3.4.1.min.js"></script>  
<script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../scripts/chosen.jquery.min.js" type="text/javascript"></script>
<link href="../styles/chosen.min.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../Scripts/jquery-ui.js"></script>

前端下拉框控件代码 #

<asp:DropDownList ID="dropdown" TabIndex="28" CssClass="chosen-default" AutoPostBack="true"
OnSelectedIndexChanged="dropdown_selectedIndexChanged" runat="server">
</asp:DropDownList>

后端数据绑定代码 #

dropdown.DataSource = objResult.Tables[6].DefaultView;
dropdown.DataTextField = objResult.Tables[6].Columns["Name"].ToString();
dropdown.DataValueField = objResult.Tables[6].Columns["Id"].ToString();
dropdown.DataBind();

Chosen初始化代码 #

$(function () {
    $('#dropdown').chosen();
});

问题根因 #

• 依赖冲突：同时引入jQuery 3.4.1和jQuery 1.9.1两个版本，后加载的1.9.1会覆盖前序jQuery实例，若当前Chosen版本和加载的jQuery版本不兼容，会导致自定义渲染逻辑失效。
• 缺失自定义渲染配置：Chosen默认只会读取option标签的text属性直接展示，不会自动拼接value字段的Id内容，仅调用基础.chosen()方法无法实现括号附带Id的效果。
• 选择器匹配失效：ASP.NET WebForm的服务器控件默认会根据命名容器生成带前缀的前端ID，直接用$('#dropdown')大概率无法选中实际渲染的下拉框DOM，导致初始化不生效。
• 初始化时机不匹配：下拉框开启了AutoPostBack="true"，页面局部回发后原有Chosen实例会被销毁，DOM ready阶段的初始化只在首次页面加载时执行，回发后不会重新绑定逻辑。

修复步骤 #

1. 清理重复jQuery依赖，仅保留一个和Chosen版本兼容的版本（如保留jQuery 3.4.1，删除1.9.1的引用），避免版本覆盖问题。
2. 修正控件ID匹配问题，给下拉框控件添加ClientIDMode="Static"属性，强制前端渲染的ID和服务端定义的ID一致：

<asp:DropDownList ID="dropdown" TabIndex="28" CssClass="chosen-default" AutoPostBack="true"
OnSelectedIndexChanged="dropdown_selectedIndexChanged" runat="server" ClientIDMode="Static">
</asp:DropDownList>

3. 增加自定义选项渲染逻辑，在下拉框展开时给选项文本拼接对应Id，同时增加重复判断避免多次追加内容：

// 抽离公共的渲染绑定逻辑
function bindChosenRender() {
    const $drop = $('#dropdown');
    $drop.off('chosen:showing_dropdown.customRender').on('chosen:showing_dropdown.customRender', function() {
        $(this).find('option').each(function() {
            const $opt = $(this);
            const val = $opt.val();
            const originText = $opt.data('originText') || $opt.text();
            // 存储原始文本，避免重复拼接
            if (!$opt.data('originText')) $opt.data('originText', originText);
            $opt.text(`${originText} (${val})`);
        });
        $drop.trigger('chosen:updated');
    });
}

$(function () {
    const $drop = $('#dropdown');
    $drop.chosen();
    bindChosenRender();
});

4. 适配AutoPostBack局部回发场景，在回发完成后重新初始化Chosen、绑定渲染逻辑：

if (Sys && Sys.WebForms && Sys.WebForms.PageRequestManager) {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
        const $drop = $('#dropdown');
        // 销毁旧实例后重新初始化
        $drop.chosen('destroy').chosen();
        bindChosenRender();
    });
}

完成以上调整后，下拉选项即可正常展示「Name (Id)」格式的内容，和参考项目效果一致。

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