Chosen: 如果 select 最初是隐藏的，则不起作用

是的，您应该修补咖啡脚本。 我也是为了设置隐藏元素的能力。

+1 今天遇到了这个问题

+1 和我一样

作为一种解决方法，您可以使用!important标志设置创建的div的宽度：

#my_select_chzn {
  width: 100% !important;
}

事实上，这会让你更接近你需要去的地方。 宽度并不完美，但一切都将可见。

#my_select_chzn {
  /* This is the only width setting you'll need to change. */
  width: 100% !important;
}
#my_select_chzn .chzn-drop {
  width: 100% !important;
}
#my_select_chzn .chzn-drop .chzn-search {
  width: 99% !important;
}
#web_template_exploit_name_chzn .chzn-drop .chzn-search input {
  width: 98% !important;
}

Chosen 的早期版本实际上进行了测试，以查看表单字段宽度是否是通过 css 设置的。 如果是这样，它没有使用宽度计算。 我想我更喜欢这种修复方法，而不是添加 30 行代码来测试隐藏元素。 像这样的事情对你有用吗？

设置宽度：

  <select style="width:350px;" class="chzn-select">

JS首先测试设置宽度：

  <strong i="10">@f_width</strong> = if @form_field_jq.css('width')? then parseInt(@form_field_jq.css('width'),10) else @form_field_jq.width()

@pfiller您的代码中有一个小错误。 如果内联样式的宽度单位不是像素（如 em），则代码会将其解释为像素。 请参阅selected.jquery.coffee 中的第 56

我认为人们会不断抱怨它，而您最终需要添加那 30 行代码。

嗨@pfiller ，这不起作用。 width() 和 css("width") 都为隐藏元素返回 0。 我正在使用 getHiddenDimensions 技术并且它运行良好。

顺便说一句，您需要将它用于 f_width 和 get_side_border_padding

+1 为此。

我正在集成 Chosen 的站点上的许多逻辑依赖于在第一次加载时隐藏的一些选择，因此我们遇到了各种各样的问题。

+1也是如此。 应该内置可见性检查。

:+1: :+1: :+1:

在第一次启动时没有永久设置下拉宽度的解决方案如何，并且在打开时仅将其调整为文本框的宽度？ 这样你就不必接触输入的宽度，只需假设它是用 css 设置的，并在每次打开下拉菜单时阅读它。

+1 为此。 我决定将 Chosen 转换为 ExpressionEngine CMS 的字段类型，但 EE 的发布布局允许在页面加载时隐藏字段。

我不确定这是否相关，但在 EE 的情况下，最好是宽度是可变的，或者只是始终 100% 的包含元素......

http://www.alistapart.com/articles/now-you-see-me/

撞到了这个……它仍然在最新版本中发生

+1
此错误阻止了 Netflix 内部应用程序使用 Chosen 插件

:+1: 关于这个问题，今天遇到了这个问题

您可以通过以下方式隐藏您的内容： position: absolute; 左：-999em；
这样，屏幕阅读器和 Google 也可以“阅读”它们，并且再次显示时您的“选择”下拉列表将可见。

我的拉取请求修复了这个问题，但就像我的另一个请求和许多被选择的请求一样，它们被忽略了。 这个项目有太多的贡献者，而代码库太少。

DelvarWorld，感谢您的补丁。 这一直困扰着我，我正要实施类似的解决方案，并想我会仔细检查是否有人已经这样做了。

我将在测试后不久将其部署到生产代码中。

@DelvarWorld你指的是什么拉取请求？ 我看到你的一个公开拉取请求，它没有解决这个问题。

@pfiller上面在这个线程中列出的https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

比使用 css 更重要的是在呈现结果时使用元素的“当前”宽度，而不是使用来自 Chosen 构造的错误缓存宽度。

有很多变化，我不太确定自己合并它们的最佳方法。 你会很快有一个合并的版本吗？

@bewest我的拉取请求就是这样做的，每次显示下拉列表时，它都与元素的宽度相匹配

@delvarworld我知道，只是确保做出正确的区分。

您可以尝试使用 HEAD 更新您的自动宽度分支吗？ 我尝试在 8 月底左右从类似的结帐中合并，但现在输入框的宽度错误（它太宽了，超出了所选容器的宽度）。

我正在查看，但也进行了一些重新组织...构造函数已被删除，以支持 setup 和 finish_setup 方法。 我也不熟悉coffeescript，所以你的合并进度可能比我的快，提交拉取请求我的帮助，因为似乎对这个问题很感兴趣。

实际上，我的分支已经偏离了那个变化，最终我放弃了原型版本的工作。 我的错，我认为在这一点上它是不可合并的。

@DevarWorld是的，它需要稍微修改一下，以便在抽象实现中使用一些位。 这应该可以更容易地维护原型和 jquery 之间的差异。

你愿意再试一次吗？

一个礼貌的碰撞……有人在做这个吗？

Chosen 对我不起作用，因为它隐藏了我的选择，然后无法计算宽度。 我必须通过在 CSS 中的每个 chzn 组件上任意设置宽度来破解它。 这看起来不像它应该如何工作，它甚至看起来不像我在网站上看到的那样正常。

我也遇到了这个问题。 事实证明，选择用于获取元素宽度的方法在早期版本的 jquery 中被破坏了（对不起，我没有确切的版本号）。 如上所述，错误是当元素不可见时，宽度将返回 0。这个错误有很好的文档记录，并且有很多方法可以解决。

我们的解决方案是简单地升级到最新版本的 Jquery。 是的，我们不得不对使用 jquery 的旧代码进行一些修补和测试，但从长远来看，它修复了很多问题，并减少了对整个 js/css 的小改动的需要。

我正在安装打包在 rails jquery gem 和 jquery-ujs 中的最新 jquery。 我想这还是太老了吗？

是的，一个实际的版本号会很好。 我可以确认 1.6.2 是
也太老了。

2011 年 11 月 16 日星期三 11:23，Kevin Elliott <
回复@reply.github.com

写道：

我正在安装打包在 rails jquery gem 中的最新 jquery
和 jquery-ujs。 我想这还是太老了吗？

@RoyJacobs newest目前是 1.7，因为它已经发布。

@RoyJacobs我可以确认我们正在使用 1.6.4 没有问题。

这很奇怪。 是的 jquery-rails gem 使用的是 jQuery 1.7。 但它仍然不适合我。

您可以看到它没有使用宽度进行渲染。 检查显示所有计算出的宽度为 0px。 即使我将 .chzn-select 设置为在 CSS 中或直接在 select 标签的样式参数中具有宽度，也会发生这种情况。

https://skitch.com/kevinelliott/gjufg/winetribe
https://skitch.com/kevinelliott/gjufp/winetribe

当然烦人。 选择似乎正在显示：无（我从所选的 javascript 中假设），我只能想象它然后无法正确计算宽度。

想法？

我真的希望我可以让它在任何情况下都能工作（即使我不得不强迫它）。 似乎没有任何效果。 我将被迫完全放弃这个（我当然不想再处理这些坏掉的东西）。

确保您的选择应用了一些 CSS、样式表或内联。 如果你用样式表来做这意味着你必须在调用 selected() 之前将元素注入到 DOM 中。

但我同意要做到这一点非常困难。 我真的希望能够通过 CSS 将宽度应用于所选的选择。 一类，一种宽度，px 或 %。
我的 CSS 然后看起来像

.example 选择，.example .chzn-smth {
宽度：50%；
}

无论您如何、何时或在何处调用 selected，这都会正确应用宽度。

我已经尝试过内联和通过样式表，但行为没有改变。

灯箱和手风琴的相当大的问题。 有人在做补丁吗？

我想没有人是！ 我很震惊，因为我不明白这对任何人都有用。 我什至没有人为地隐藏我的内容。 selected() 调用似乎正在这样做。 这么奇怪。

@kevinelliott我认为那些遇到这个问题的人要么继续前进，要么找到了解决办法。 正如我所说，在我们的例子中，这只是升级 jquery 的问题。 还要记住，我们已经设计了我们的元素的宽度为 224 像素，我们设置“显示：无；”直接在元素上而不是在样式表中。

我希望这对你有帮助，并且你能够让它工作。

谢谢理查德。 我升级了我的 jQuery 并没有帮助。 奇怪的是我没有隐藏我的选择元素。 选择是隐藏它。 所以我什至不确定发生了什么。

@kevinelliott Np。 我很好奇，你设置你的宽度了吗？元素？如果是这样，您使用百分比还是像素？

我是。 我用像素设置它。 我试过直接用 style 属性在元素上设置它，我也在 CSS 中试过。

@kevinelliott说实话，我有点不知所措。 我唯一剩下的建议是 1) 将 select 元素包装在一个元素中（我们这样做，并且我们的工作正常），以及 2) 逐步浏览所选库以找出所选的哪个点隐藏了你的 select 元素......当我们遇到问题时，我也不得不这样做。

对不起，我无法提供更多帮助。

我有一个案例，即使在选择选定的固定宽度时创建一个宽度：0px。
我不知道为什么，在这种情况下不起作用，而在其他情况下工作......

@tiagobrito ：我

@RichardBlair感谢您的帮助。 如果您想到其他任何事情，请告诉我们:)

+
同样的问题，求解决

@tiagobrito ， @dhampik你能把一个小要点放在一起来说明这个问题吗？

@bewest我已经想通了！ 当我在我的项目中使用 jquery 1.4.x 时，它会附加。
下周一我会告诉你正确版本的 jquery 导致我的宽度：0px

@bewest我也确认，
旧版本的 jquery（我想是 1.6.4 之前的）
弄乱了 select 的布局，它最初是隐藏的
这里有2个小提琴：
混乱的布局（旧 jquery）： http :
正确的布局（新的 jquery）： http :

感谢上帝，jquery 的版本更新了新的 Yii 框架版本）

当我尝试将 Chosen 集成到 Trac 时，我遇到了这个问题。 工单属性表单中的初始选择框的宽度为 0。默认情况下，这些属性是隐藏的，可以通过单击链接展开。 jQuery v1.7.1

更新：我解决了这个问题，因为至少 foliotek 博客文章中提到的 CSS 技巧不适用于 jQuery 1.7.1。 我还没有尝试 JS 方法。

我的解决方法（对于 Trac）：

$("#modify").parent().removeClass('collapsed');
$("#field-test").chosen();
$("#modify").parent().toggleClass('collapsed');

对于那些使用 jQuery <= 1.7.1 的人

我使用jQuery Actual解决了这个问题
改变了selected.jquery.js#301从
this.f_width = this.form_field_jq.outerWidth();
到
this.f_width = this.form_field_jq.actual( 'outerWidth' );

//编辑 thx @koenpunt的 1.7.2 评论

@midday根据的README jquery.actual这只是1.7.2需要jQuery的之前版本

旧版本的 jQuery(>=1.7.1) 无法找到不可见 DOM 元素的宽度/高度。

@midday感谢您发现这一点，在实现实际插件后，它解决了选择的问题

我仍然遇到这个问题，任何想法如何解决它？

同样在这里仍然是一个问题 - 我不敢相信这已经持续了多年......

我也遇到过这个问题。 希望得到一些帮助。

这个 CSS 技巧似乎有效：

/* Fix 100% width */
.chzn-container, .chzn-drop, .chzn-drop .chzn-search, .chzn-drop .chzn-search input {
  width: 100% !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width */
.chzn-container { width:250px !important; }

@gyopazza。 它确实为我解决了问题。 谢谢你。

FWIW 我发现在 .chzn-container、.chzn-drop 和 .chzn-search 输入上设置最小宽度（即使没有 !important）也适用于初始隐藏的选择。

我的解决方法

css：

.chzn-container, .chzn-drop {
    width: 100% !important;
}

html：

而不是在选择元素中设置宽度，我选择向原始选择元素添加一个包装器 div 并设置包装器的宽度。

Chosen 现在提供了一个选项，可以使用设置的宽度进行初始化，该宽度会覆盖任何计算尝试。 对于大多数在初始化点隐藏选择的用例，这可能是一种令人满意的解决方法：

$("select").chosen({ width: '50%' });
$("select").chosen({ width: '200px' });
$("select").chosen({ width: '15em' });

我认为这个解决方法可能就像我们要修复这个错误一样。 我真的想避免包含将选择移出屏幕进行测量的代码，因为它会增加更多的复杂性。

有没有人在根据此解决方案关闭此错误时遇到问题？

我使用的是 0.9.8 版本，我的隐藏选择工作正常。 今天我更新了 0.9.14 并且他们停止工作了。 我使用的是缩小版。 当我更改为普通版本时，一切正常（chosen.jquery.js 0.9.14）。 正常吗？ 这是缩小过程中的错误吗？

在 jQuery min 或全尺寸 0.9.14 上，hidden 都不适合我。

新选项“宽度”对我有用。 至少，为以前隐藏的新选择的输入工作。

@trisweb这是一个开源项目，这里不欢迎敌意。 这里有很多人付出了大量的时间和精力，使 Chosen 成为今天的样子。 请尽量为项目的改进做出贡献或不要发表评论。 谢谢。

@kenearley我完全了解开源礼仪，应该将我的评论设计得更有效。 对于那个很抱歉。

话虽如此，我真的认为有时您需要有人对所有噪音大喊大叫。

我建议任何选定元素的宽度为零值都不合逻辑，应该设计一些可靠的方法来确定正确的宽度。 否则，应使用合理的默认值，并且出于许多不言而喻的原因，零不是合理的默认值。

这可能是一个难题，这就是为什么这个 bug 存在这么久的原因，但我相信有一些解决方案。 我个人认为新的“宽度”属性并不能解决问题，因为这仍然更多地依赖于配置而不是约定，因此可能会导致在默认情况下选择无效的零宽度。

话虽如此，我真的认为有时您需要有人对所有噪音大喊大叫。

不。没有必要“大声喧哗”。 如果有人对如何编写代码有足够的感觉，他们可以提供拉取请求或分叉存储库并根据需要进行更改。

也就是说，我感谢您的跟进并同意当前的解决方案并不理想。 随着我们的前进，我们将寻找更好的解决方案，并且非常感谢任何有兴趣改变这一点的人提出拉取请求。

@kenearley我礼貌地不同意你对修辞的看法——但当然代码总是胜于雄辩。 目前这对我们来说是一个令人恼火的问题，因此如果我找到一个好的解决方案，可能会出现拉取请求。

：+1：修复！

我已经关注 Chosen 近两年了，它仍然是最优雅的选择 UI 改进。 但是这个隐藏的问题仍然是一个主要的交易破坏者，100% 的宽度是没有解决方案的。
+1 来解决这个问题。 去团队选择！

+1 修复

除了使调用者能够以编程方式设置宽度的官方解决方法之外，我还建议一个体面的解决方法，大致基于以下线程：

http://stackoverflow.com/questions/1841124/find-the-potential-width-of-a-hidden-element

解决方法基本上依赖于这个函数：

// to be placed anywhere before the jquery.chosen initialization
    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;
};

然后由 jquery.chosen 代码的以下模块调用 Wich（从 1.0.0 开始）：

AbstractChosen.prototype.container_width = function() {
    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";
    }
};

另请参阅 #795 以获取更多详细信息。

快速修复。 而不是隐藏你的select做$(elem).chosen(options)然后$(elem).hide()即首先创建所选元素然后隐藏它。 这样就保留了原来的width 。

这不是固定的吗，开放3年？

+1 此修复

0.9.8版本没有这个bug！ 你曾经调用 jquery outerWidth 来获取宽度，现在你使用 HTML offsetWidth，它产生为零......

我相信他的意思是这是一种回归，这是有希望的。 有没有
放弃 jQuery 方法的原因是什么？

@pfiller我在使用 jQuery 1.10.2 时遇到了这个问题，而您的$("select").chosen({ width: '50%' });解决方案对我来说非常有用。 对于我的用例，这是一个可行的解决方法。

我使用$(this.form_field).outerWidth()来获取偏移宽度，在完整代码下方：

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + $(this.form_field).outerWidth() + "px";
    }
};

+1 我真的需要这个修复。 我默认隐藏一个表单，用户必须单击一个按钮才能显示它。 由于它是隐藏的，它没有正确设置我的选择的宽度

@henesnarfel - 您可能想尝试使用@pfiller在此处发布的解决方法： https :

磕磕碰碰，问题依旧。 应该有一个内置的解决方案。 我会+1。

我能想到的唯一解决方法是转到第 455 行（至少在我的编辑器上），它从函数container_width返回以下代码：

return "" + this.form_field.offsetWidth + "px";

并将其替换为

return "" + $(this.form_field).outerWidth() + "px";

问题消失了。

@ayyash并没有完全解决这个问题。 只是让它比宽度 0 更好。

对我来说，这成功了（填写您自己的尺寸以获得乐趣）：

/* Fix  width bug */
.chosen-container, .chosen-drop, .chosen-drop .chosen-search, .chosen-drop {
  width: 220px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Input Box has to be slightly smaller, don't know why and I don't care. */
.chosen-search input {
    width: 210px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width of the whole thing */
.chosen-container { width:220px !important; }

谢谢

@Thinklabsnk谢谢，很好，快速修复。

编辑：这仅适用于所有选择元素都具有相同宽度的情况。

这是我的解决方法，基于其他一些建议。 它克隆隐藏的输入并将它们附加到主体以测量宽度，但它还在附加之前将克隆的可见性设置为隐藏，以便它们不会显示在屏幕上。

在 selected.jquery.js 中找到这行代码（在我的版本中是第 455 行）：

        return "" + this.form_field.offsetWidth + "px";

并将其替换为：

        var calculatedWidth = this.form_field.offsetWidth;
        // Fix for zero width on hidden inputs.
        if (0 == calculatedWidth) {
          var clone = this.form_field_jq.clone();
          clone.css("visibility", "hidden");
          clone.appendTo('body');
          calculatedWidth = clone.offsetWidth;
          clone.remove();
        }
        return "" + calculatedWidth + "px";

希望有帮助。

@danjjohnson谢谢，成功了！

唯一的事情是我必须改变：

clone.offsetWidth; 

到

clone.outerWidth();

出于某种原因， clone.offsetWidth 给了我一个未定义的值。

此致，

这个错误发生在 Firefox 中，永远不要在 Chrome 或其他人上测试。

第一张图（上）
选择的设置宽度，因为它有滚动条，而没有。 这是不正确的结果。

第二张图（中）
选择设置宽度，因为它具有像第一张图像一样的滚动条，但这次它具有正确的滚动条。

第三张图（下）
这是第一张图像没有滚动条时的样子。 这个测试我将选择的宽度设置为width: 100% !important

:thumbsup: 对于@danjjohnson的修复与@johnmerced的修改

我有另一个修复，简单且有效。 重点是不要让宽度变为零：

   // don't let the width to be "0"
   $(".chosen-select,.chosen-multiple-select").each(function(){
        if($(this).width() == 0){
            $(this).width(240);
        }
    });
    // call it :)
    $(".chosen-select,.chosen-multiple-select").chosen({allow_single_deselect:true});

你好，
我对这个问题的建议是迄今为止发布的解决方案（选择 1.2.0）的组合：

    AbstractChosen.prototype.container_width = function () {
        if (this.options.width != null) {
            return this.options.width;
        } else {
            //Original:
            //return "" + this.form_field.offsetWidth + "px";
            //Workaround:
            if(this.form_field.offsetWidth > 0) {
                return "" + this.form_field.offsetWidth + "px";
            } else {
                if($(this.form_field).css('width')) {
                    return parseInt($(this.form_field).css('width'),10) + "px";
                } else {
                    return "" + $(this.form_field).outerWidth() + "px";
                }
            }
        }
    };

只需为隐藏的选择定义一个以 px 为单位的静态 css-width。

仍然需要整体修复。

这里的问题是，如果您更改窗口的大小，则选择始终显示为与初始化时相同的大小。 我认为更好的解决方案是在显示或调整窗口大小时调整选择的大小，而不是在隐藏时猜测初始化时应采用的宽度。

有没有办法动态改变所选对象的大小？ 由于我知道何时更改大小（调整大小事件或 onShow 或类似事件），因此它可能是一种解决方法。 是否有 API 函数可以更改所选对象的大小？ 或者以某种方式重新初始化？

：+1：修复。 今天遇到这个

:+1: 浪费了_way_太多的时间来跟踪这个。

仍然有模态尺寸的问题。 有没有计划在 4.0 版本中修复它？

@danjjohnson当第一个元素比其他元素小得多时，您的修复无法解决问题

基于@danjjohnson ，这对我

黑客

找线

return "" + this.form_field.offsetWidth + "px";

用。。。来代替

var calculatedWidth = this.form_field.offsetWidth;
          // Fix for zero width on hidden inputs.
          if (0 == calculatedWidth) {
              var clone = this.form_field_jq.clone();
              clone.css({"left": 10000, "position": "fixed"});
              clone.appendTo('body');
              calculatedWidth = clone.outerWidth();
              clone.remove();
          }
          return "" + calculatedWidth + "px";

$('select').chosen({width: '100%'}); @pfiller在

谢谢

由于我无法在我的项目目录中加载资产，我该如何摆脱 selected-search 类？

当从尚未呈现的模板加载静态选择时，我不得不添加超时。 尝试初始化时，层次结构中没有任何指标。 将它包装在零超时至少将初始化碰撞到事件队列的末尾..

// Found this in chosen.jquery.js and patched it as follows
AbstractChosen = (function () {
    function AbstractChosen(form_field, options) {
        if (!AbstractChosen.browser_is_supported()) {
            return;
        }

        var self = this;
        window.setTimeout(function () {
            self.form_field = form_field;
            self.options = options != null ? options : {};
            self.is_multiple = self.form_field.multiple;
            self.set_default_text();
            self.set_default_values();
            self.setup();
            self.set_up_html();
            self.register_observers();
        }, 0);
    }

我刚刚被这个错误咬了，100% 为我解决了这个问题。

@harvesthq你会接受解决这个问题的拉取请求吗？ 还不确定最好的解决方案，但我很乐意修复并提出拉取请求 :heart:

一个强大的解决方法是使用 ng-if 而不是 ng-show。 工作完美，很简单。

我发现 ng-if 是许多情况下的首选。 不仅修复损坏的 ng-select，还允许递归控制器（使用 ng-if、ng-controller、ng-init 和 ng-template 的组合）。

所以这个4年的问题似乎还没有解决？！？！

+1

同时+1...我正在使用select2

有没有什么办法可以在单击所选选项列表时在区域中扩展一个微调器，它必须在将数据附加到所选 jquery 时发生。 我正在将大量记录处理到选定的 jquery 中，处理和显示它们需要时间。 ??

多么史诗般的 5 年虫子……而且还在咬人（哎哟！）。

Google 的地图也有类似的错误，无法在隐藏的 div 中正确显示。 然而，这两个问题都有易于实施的变通方法。

是的，我在去年 IIRC 的某个时候遇到了 google maps 错误，但是有多少人在找到这份报告之前花了半天时间诅咒和尝试各种事情？ 流行库中的此类错误会浪费数小时的时间。 乘以每年学习这些库中的任何一个的人数，总成本可能是惊人的......如果他们不打算修复它，那没关系。 在这一点上修复它可能会与大量部署的变通方法发生奇怪的交互……在这种情况下，他们应该承认他们没有修复它并在文档的显着位置记录变通方法，这样人们就不会努力制作（或错过）这些东西的截止日期。

我的“整体”修复与其他修复类似，它假设我在标记中选择的所有宽度都是其父 div 的 100%。 我们使用引导程序，所以我们就是这种情况。

在页面加载时初始化 .chosen() 后立即运行此代码。

``
$(".chosen-container").each(function(i, elem) {
如果 ($(elem).width() == 0) {
$(elem).width("100%");
}
});
````

对于那些遇到问题的人，如果元素最初位于 css 隐藏容器内，然后在可见时宽度为 0px - 我发现的解决方法是在 js 配置中设置宽度；

var config = { '.chosen-select' : {}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); }

然后我为选择输入提供了 css 类 selected-select-width

<select name="f01" class="chosen-select-width" id="item_select_staff">

似乎可以使用所选的 v1.6.2 和 jquery 版本 3.1.1 来解决问题。

我只是保留默认选择的宽度选项（自动）并添加

.chosen-container { min-width:5em; }

到我网站的 CSS（根据需要调整最小宽度）。 这使得它永远不会变成 0px（或太小而无法使用），同时仍然尽可能适合选择的理想宽度（当您将选择元素与其他内容内联时，强制使用 100% 宽度或其他效果不会很好地工作）方法解决了核心问题，并允许内联选择元素和看似提供最简单和最直接的实现）。

这七年了怎么还破？

我使用 bootstrap 3 的 workarond 添加以下样式：

.chosen-container {
    min-width: 90%;
}

我使用 bootstrap 3 的 workarond 添加以下样式：

.chosen-container {
    min-width: 90%;
}

购买然后下拉仍然不显示.... @koenvanderlinden

它已经被记录在案
https://harvesthq.github.io/chosen/options.html
检查width选项及其描述

@qbadev虽然这使得元素在需要时不会调整大小以适应内容，所以我并没有真正将其视为修复（尤其是当使用 min-width 提供比这更好的结果时）。

文档的描述实际上只是指出了错误（应该可以解决）并提到使用它作为错误的潜在解决方法。

@koenvanderlinden推荐min-width:90%;所以它通常是 90% 的宽度，如果选择的内容需要它，它会增加到 100% 的宽度。 再说一次，我仍然选择min-width:5em; （确切的 em 值因用例而异）所以它永远不会太小，但它仍然尝试扩展以适应选择的内容而不是基于父级的大小元素。

@KZeni我没有说这是一个修复。 它只是记录在案。 这是一个很好的解决方案。 我的主要问题是，在初始化之后，Chosen 的宽度几乎为 0。 现在，在“修复”之后，我可以看到被选中并且可以使用应用于父元素的 CSS 类来做任何我想做的事情。

我以前多次遇到过这样的问题，因为对象的宽度为 0，所以无法计算。 它无法以通用方式解决，因为每个应用程序都不同。
因此，当一个选择在初始化的时刻可见时，不需要任何操作，但如果它是隐藏的，则使用width选项是一种使用方式。

自定义宽度支持
在 Chosen 中使用自定义宽度就像在创建 Chosen 时传递一个选项一样简单：
$(".chosen-select").chosen({width: "95%"});

https://harvesthq.github.io/chosen/

我在 jQuery 从 1.* 升级到 3.* 版本后发现了这个问题。
解决了：

选择的.jquery.js:543
AbstractChosen.prototype.container_width = function () {
return this.form_field.offsetWidth + "px";
->
return $(this.form_field).outerWidth() + "px";