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

Posted 2023-05-07

【中文标题】选择的 jQuery 组合框是不是可以根据它是不是打开而具有不同的宽度？

【英文标题】：Can the chosen jQuery combobox have different widths based on whether it's open?选择的 jQuery 组合框是否可以根据它是否打开而具有不同的宽度？

【发布时间】：2013-06-17 13:39:21

【问题描述】：

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

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

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

【参考方案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%;