首先,我添加了对库的引用：

< script type =“text / javascript”src =“Chosen / chosen.jquery.js”>< / script>

我加入了CSS：

< link rel =“stylesheet”href =“Chosen / chosen.css”/>

然后我将课程应用到我的下拉菜单中：

<asp:DropDownList class="chosen-select" ID="ddlEmps" runat="server" AutoPostBack="True" 
                            ToolTip="Select the employee." 
                            onselectedindexchanged="ddlEmps_SelectedIndexChanged" >

最后在文件准备好了我.chosen()它：

$(document).ready(function() {
            $(".chosen-select").chosen();
        });

这是浏览器中的html标记：

标记基本上是：

<select name="ddlEmps" onchange="javascript:setTimeout('__doPostBack(\'ddlEmps\',\'\')',0)" id="ddlEmps" title="Select the employee." class="chosen-select" style="display: none;">
    <option value="2661">Jon</option>
    <option value="2987">Joe</option>
    <option value="3036">Steve</option>
    <option selected="selected" value="68">Mark</option>
</select>

这是它在视觉上的样子：

我相信它正在应用正确,因为css在那里,控制台中没有浏览器问题(chrome / ff / ie).我甚至可以开始打字并且结果变得更小,我只是看不到结果？

更新

我唯一注意到的是,如果我有一个DropDownList,我没有选择一个类 – 选择它(基本上是一个普通的旧asp.net下拉列表),而不是在文档就绪或窗口上加载选择它…如果我只是在控制台正确显示时将.chosen()应用于它,例如这里是一个简单的下拉列表而不应用.chosen：

所以它看起来是正确的…如果我现在去控制台部分(谷歌浏览器),只是做：

$( “#ddlEREmployees”)选择();

这只是直接在我输入的控制台中,然后它的工作原理如下所示：

但是当然我还是需要做这项工作而不必去控制台这样做……

更新2

我查看了渲染的html,它产生的宽度为：0px,但我不确定它的来源：

< div class =“selected-container selected-container-single”style =“width：0px;” title =“选择员工.” id =“ddlEtimeEmps_chosen”>< a class =“selected-single”tabindex =“ - 1”>< span> Jon< / span>< div>< b>< / b>< / div>< / a>< div class =“selected-drop”>< div class =“selected-search”>< input type =“text”autocomplete =“off”>< / div&gt ;< ul class =“selected-results”>< / ul>< / div>< / div>

请注意该部分

style =“width：0px;”

当我检查谷歌浏览器时,它不会引用.css文件…它只是说：

风格和下面我看到：

element.style {
 width: 0px;
}

这可能来自哪里？我该如何删除它？