下拉列表中的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下拉列表）而不是应用于它文档就绪或窗口加载...如果我只是在控制台中应用.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样式。

Answer 2

最初是否隐藏了您选择的控件（例如在弹出式控件中）？

若是，请尝试使用：

.chosen-select {
  width: 100% !important;
}

或以下链接中建议的一些相关的css修复;目前尚无最终解决方案。

Github问题： https://github.com/harvesthq/chosen/issues/92和https://github.com/harvesthq/chosen/issues/795

Answer 3

使用

进行尝试

$(".chosen-select").chosen({width: 10em;});

可能是一些css问题。在最终的choden div上应用调试css样式。

Answer 4

当我在标签内使用'selected-select'时，我有0宽度问题。 切换到该选项卡时，必须添加此代码。

$(window).load(function(){
    $(".chosen-select").chosen();
});

Answer 5

我想也许其他人可能会觉得这很有用，因为我们在我们的webforms应用程序中使用了Chosen。

1. 如果在页面加载时下拉/列表框不可见，则需要在将选定项实例化到下拉列表框时设置宽度。例如，我们有弹出对话框，不会在页面加载时显示。用户单击按钮/图标时会显示它们。

2. 我们在js中使用EndRequestHandlers来处理回发。有时我们必须设置宽度并再次实例化选择。这是一个例子：

$（function（）{     。Sys.WebForms.PageRequestManager.getInstance（）add_endRequest（EndRequestHandler）;     。Sys.WebForms.PageRequestManager.getInstance（）add_beginRequest（BeginRequestHandler）;

function BeginRequestHandler(sender, args) {

}

function EndRequestHandler(sender, args) {
    if (args.get_error() == undefined) {
        var postBack = sender._postBackSettings;
        var postBackClass = postBack.sourceElement.className;

        if (postBack == null || postBack.sourceElement == null || postBackClass == null || postBackClass == "") {
        }
    }

    $('#filter-container select').chosen({ width: "100px", disable_search_threshold: 10, no_results_text: "Item Not Found" });

}

}）;

1. 选择不够健壮，不知道它已经在其他地方的另一个电话中应用了。所以请注意你选择的选择器将Chosen插件应用于它。最具体的是更具体。

Answer 6

如果弹出窗口中的所选字段ID，请尝试此css。这对我有用。

.chosen-container.chosen-container-multi {
    width: 100% !important;
}

Answer 7

我跑过的另一个选择。

AbstractChosen.prototype.container_width = function () {
      var getHiddenOffsetWidth = function (el) {
        // save a reference to a cloned element that can be measured
        var $hiddenElement = $(el).clone().appendTo('body');
        // calculate the width of the clone
        var width = $hiddenElement.outerWidth();
        // remove the clone from the DOM
        $hiddenElement.remove();
        return width;
      };
      if (this.options.width != null) {
        return this.options.width;
      } else {
        return "" + (($(this.form_field).is(":visible"))
        ? this.form_field.offsetWidth
        : getHiddenOffsetWidth(this.form_field)) + "px";
      }
};