使用ASP与Bootstrap时下拉框重复，如何隐藏左侧重复项？

看起来你遇到的问题是Chosen插件没有正确隐藏原生的ASP.NET DropDownList控件，导致两个下拉框同时显示。即使移除CSS后问题依然存在，说明大概率是初始化逻辑或者控件选择器的问题，而不是单纯的CSS冲突。下面是几个针对性的解决方案：

1. 确保正确初始化Chosen（关键！） #

ASP.NET的服务器控件（比如DropDownList）会生成带有前缀的客户端ID，直接用服务器端ID写选择器会找不到元素，导致Chosen初始化失败，原生控件自然不会被隐藏。你需要用ClientID来获取正确的客户端选择器：

首先，确保页面已经引入了jQuery和Chosen的JS文件（顺序不能错，先jQuery再Chosen）：

<script src="jquery.min.js"></script>
<script src="chosen.jquery.js"></script>

然后在DOM加载完成后初始化控件：

$(document).ready(function() {
    // 使用ClientID获取正确的客户端元素ID
    $('#<%= DropDownList1.ClientID %>').chosen();
});

2. 手动强制隐藏原生控件 #

如果初始化后原生控件还是没被隐藏，可能是Chosen的自动隐藏逻辑失效了，这时候可以手动给原生控件添加隐藏样式：

方式一：直接给控件加CSS类 #

给DropDownList添加CssClass属性：

<asp:DropDownList ID="DropDownList1" runat="server" CssClass="hidden-native-select">
    <!-- 你的选项 -->
</asp:DropDownList>

然后添加对应的CSS：

.hidden-native-select {
    display: none !important;
}

方式二：通过ASP.NET的ClientID写CSS #

#<%= DropDownList1.ClientID %> {
    display: none !important;
}

3. 排查初始化失败的其他原因 #

如果以上方法都没用，你可以检查以下几点：

• 打开浏览器开发者工具（F12），查看控制台是否有JS报错，比如jQuery未定义、Chosen文件加载失败等
• 检查Chosen的CSS文件是否正确引入，虽然你说移除CSS后问题还在，但正确的CSS是Chosen正常工作的前提
• 确认DropDownList控件在服务器端已经正确渲染（查看页面源代码，确认原生<select>标签存在）

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