Multiselect下拉框动态追加项无法在UI显示的问题

你遇到的问题核心原因是：Bootstrap Select插件会将原生<select>元素转换为自定义的UI结构，直接通过jQuery修改原生<option>后，插件无法感知到选项的变化，因此新添加的选项不会在自定义UI中显示。同时你的代码还有几处细节问题需要修正：

具体解决方案 #

1. 移除重复的jQuery引入

页面同时引入了jQuery 3.6.0和3.5.1，版本冲突会导致插件绑定异常，删除其中一个（建议保留3.6.0版本）。

2. 统一jQuery对象引用

由于启用了noConflict()，$可能已不再指向jQuery，需统一使用你定义的$s或$j引用，避免混合调用导致的对象找不到问题。

3. 强制刷新Bootstrap Select UI

在完成所有选项追加操作后，必须调用插件的refresh和render方法，让插件重新生成UI结构，识别新添加的选项。

4. 修正JSON格式

原代码中请求数据'{flag:"7"}'不符合严格JSON规范，键名必须用双引号包裹，否则后端可能无法正常解析。

修改后的完整代码 #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dummy.aspx.cs" Inherits="WREFKAIProjevtWIPTracker.WIPTracker.dummy" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' />
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css' />
    
</head>
<body>
    <form id="form1" runat="server">
        <select id="ddlmultiselect" class="selectpicker" multiple aria-label="Default select example" data-live-search="true">
            
        </select>
        <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js'></script>

        <script>
            var $j = jQuery.noConflict();
            $j(function () {
                BindDDL();
            });
            function BindDDL() {
                var $s = jQuery.noConflict();
                // 修正JSON格式，键名用双引号包裹
                var d = '{"flag":"7"}';
                $s.ajax({
                    type: "POST",
                    url: "../WIP.asmx/BindGrid",
                    data: d,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",        
                    success: function (Response, status, xhr) {
                        $s("#ddlmultiselect").empty();
                        // 统一使用$s引用jQuery对象
                        $s("#ddlmultiselect").append($s("<option></option>").val(0).html("--Select--"));
                        $s(Response.d).each(function (value, item) {
                            $s("#ddlmultiselect").append($s("<option></option>").val(item.ID).html(item.iValue));
                        });
                        // 刷新插件UI，让新选项显示出来
                        $s("#ddlmultiselect").selectpicker('refresh');
                        $s("#ddlmultiselect").selectpicker('render');
                    },
                    error: function (error) {
                        // 可添加错误提示逻辑
                    },
                    complete: function () {
                        // 可添加完成后的清理逻辑
                    },
                    failure: function () {
                        // 可添加失败提示逻辑
                    }
                });
            }
        </script>
    </form>
</body>
</html>

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