选择的 jQuery 组合框是否可以根据它是否打开而具有不同的宽度？答案

【问题标题】：Can the chosen jQuery combobox have different widths based on whether it's open?选择的 jQuery 组合框是否可以根据它是否打开而具有不同的宽度？
【发布时间】：2013-06-17 13:39:21
【问题描述】：

我使用 selected 是为了制作一个有趣的组合框。一切正常，但我有一个问题。

我认为选项列表采用视觉组合框中给定的宽度。我所有的选项都很长，我必须制作一个非常大的组合框以避免选项分成两行。

是否可以在关闭时创建一个小组合框，例如 150 像素，而在列表打开时创建一个更大的组合框？

【问题讨论】：

标签： jquery-chosen

【解决方案1】：

是的，这是可能的。这可以通过两种方式完成：

在chosen.css文件的chzn-drop类中直接添加样式"width"。
通过 jQuery 添加宽度。

我更喜欢第二个，这里是代码：

HTML：

<select class="chzn-select" data-placeholder="select your options" style="width: 150px">
    <option value="">option1</option>
    <option value="option1">option2</option>
    <option value="option2">option3</option>
</select>

jQuery：

$('.chzn-select').chosen();
$('.chzn-drop').css({"width": "300px"});

结果：

希望你能理解。

【讨论】：

谢谢，我认为这是一个很好的解决方案。我只是会尝试找到一个解决方案，根据最长的选项文本，用自适应大小替换这个 300px。
@Hugo 很高兴能为您提供帮助。
我只是像这样修改您的示例：$('.chzn-drop').css({"width": "auto", "white-space": "nowrap"}); 并为我工作
在新版本中是$('.chosen-drop')
编辑 chosen.css .chosen-container .chosen-drop { .... display: table; }

【解决方案2】：

但是，批准的答案是正确的：您也可以对其进行设置，以便下拉菜单采用承载其内容所需的宽度，而不是固定值。我也这样做了，它不会比选择框本身小。

$('.chosen-drop').css({minWidth: '100%', width: 'auto'});

【讨论】：

好答案：自动ftw！
这实际上比公认的答案要好，因为它可以很好地自我调整

【解决方案3】：

您可以选择初始化器来设置宽度属性。

$(".chosen-select").chosen({ allow_single_deselect: true, disable_search_threshold: 5, width:"100%" });

【讨论】：

【解决方案4】：

Koenpeter 仅添加“宽度：自动”的答案对我不起作用。我发现这一切都可以通过以下方式在 CSS 中完成：

.chosen-container .chosen-drop {
    min-width: 100%;
    width: auto;
}

.chosen-container .chosen-drop ul {
    white-space: nowrap;
}

【讨论】：

【解决方案5】：

$('.chosen-select').each(function() {
    var $this = $(this);
    $this.next().css({'width': '225px'});
});

【讨论】：

【解决方案6】：

要使其继承原始选择的类的宽度，请将其初始化为空宽度。

        $(selector).chosen({                
            inherit_select_classes: true,
            width: '',
            /*other options*/
        })

【讨论】：

【解决方案7】：

使行太宽会在小屏幕上出现一些问题，我将这个自定义 css 添加到我的网页中，只有当屏幕足够大时才会使所选选项行更宽：

@media screen and (min-width: 720px) {
  .chosen-container .chosen-drop {
     border-top: 1px solid #aaa !important;
     width: auto !important;
     white-space: nowrap !important;
     min-width: 100%;
   }
}

【讨论】：