jQuery在下拉列表中选择的插件看起来很奇怪？

Question

我正在使用所选的jQuery插件,我相信我已经正确完成了所有事情但是我的asp.net下拉列表的宽度非常小,我没有看到结果.

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

<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,我没有一个类chosen-select就可以了(基本上是一个普通的老asp.net下拉列表),而不是选择施加给它的文件准备或窗口的onload ......如果我只是适用.chosen()于它在控制台中显示正确,例如这里是一个简单的下拉列表而不应用.chosen:

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

$("#ddlEREmployees").chosen();

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

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

更新2

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

<div class="chosen-container chosen-container-single" style="width: 0px;" title="Select the employee." id="ddlEtimeEmps_chosen"><a class="chosen-single" tabindex="-1"><span>Jon</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div>

请注意该部分

style="width: 0px;"

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

风格和下面我看到:

element.style {
 width: 0px;
}

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

Answer 1

我不得不玩jquery并删除样式...

$(".chosen-select").chosen(); $('.chosen-container').css('width', '');

这删除了我在初始问题中描述的CSS样式.