7

我正在使用选择的 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，它产生了一个 width: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;
}

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

4

7 回答 7

5

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

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

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

于 2013-09-16T21:47:44.910 回答
1

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

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

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

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

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

于 2013-09-17T06:37:24.800 回答
0

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

$(window).load(function(){
    $(".chosen-select").chosen();
});
于 2013-09-16T23:12:04.117 回答
0

尝试使用

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

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

于 2013-09-16T11:26:37.087 回答
0

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

.chosen-container.chosen-container-multi {
    width: 100% !important;
}
于 2015-03-05T15:53:35.317 回答
0

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

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

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

$(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 不够健壮，无法知道它已经从其他地方的另一个调用中应用。因此，请注意您选择的选择器来应用 Chosen 插件。最好更具体一些。
于 2014-11-20T14:02:07.907 回答
0

我遇到的另一个选择。

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";
      }
};
于 2017-10-20T02:02:58.877 回答