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

【问题标题】：jQuery's chosen plugin on dropdownlists looks odd?jQuery 在下拉列表中选择的插件看起来很奇怪？
【发布时间】：2013-09-20 12:29:09
【问题描述】：

我正在使用所选的 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;
}

这可能来自哪里？我怎样才能删除它？

【问题讨论】：

什么时候填写下拉列表值？
@IrvinDomininakaEdward - 这是 asp.net 网络表单等页面加载。
尝试使用 $(window).load(function(){ 代替 domready
@IrvinDomininakaEdward - 我不认为这是问题所在，并不是说它不起作用......正如我提到的，我实际上可以在输入chosen 下拉列表时过滤结果。问题是我没有看到结果...
我认为选择的 init 在页面加载完成之前被触发，因此宽度是空控件；尝试使用 windows.load 选择初始化。

标签： jquery asp.net webforms jquery-chosen

【解决方案1】：

尝试使用

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

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

【讨论】：

这不是有效的语法。

【解决方案2】：

我不得不使用 jquery 并删除样式...

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

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

【讨论】：

我也有同样的问题。我已经准备好文档中的$("#controlId").chosen();。但是 asp.net 下拉列表首先是不可见的。所以我尝试了 Irvin 的建议，但没有奏效。我也很好奇是什么导致了宽度：0px;我可以验证$('.chosen-container').css('width', ''); 修复了它。

【解决方案3】：

当我在选项卡内使用“选择的选择”时，我遇到了 0 宽度问题。切换到该选项卡时必须添加此代码。

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

【讨论】：

【解决方案4】：

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

如果是这样，请尝试使用：

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

或以下链接中建议的一些相关 css 修复；目前没有发布最终修复。

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

【讨论】：

【解决方案5】：

我想也许其他人会觉得这很有帮助，因为我们在我们的网络表单应用程序中使用了 Chosen。

如果在页面加载时下拉列表/列表框不可见，则需要在将 Chosen 实例化到下拉列表/列表框时设置宽度。例如，我们有在页面加载时不显示的弹出对话框。它们在用户单击按钮/图标时显示。
我们在 js 中使用 EndRequestHandlers 来处理回发。有时我们必须设置宽度并再次实例化 Chosen。这是一个例子：

$(函数() { 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" });

}

});

Chosen 不够健壮，无法知道它已经从其他地方的另一个调用中应用。因此，请注意您选择的选择器来应用 Chosen 插件。最好更具体一些。

【讨论】：

【解决方案6】：

如果在弹出窗口中选择的字段 id，试试这个 css。这对我有用。

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

【讨论】：

【解决方案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";
      }
};

【讨论】：