25

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

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

是否可以在关闭时制作一个小组合框，例如 150px，而在列表打开时制作一个更大的组合框？

4

7 回答 7

35

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

  1. 直接将样式“宽度”chzn-drop添加到selected.css文件中的类。
  2. 通过 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"});

结果：

希望你明白。

于 2013-06-20T18:14:04.087 回答
12

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

$('.chosen-drop').css({minWidth: '100%', width: 'auto'});
于 2014-04-21T21:52:16.467 回答
2

您可以在选择初始化程序的情况下设置宽度属性。

$(".chosen-select").chosen({ allow_single_deselect: true, disable_search_threshold: 5, width:"100%" });
于 2015-03-23T08:12:54.827 回答
2

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

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

.chosen-container .chosen-drop ul {
    white-space: nowrap;
}
于 2017-05-12T13:10:31.980 回答
1

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

        $(selector).chosen({                
            inherit_select_classes: true,
            width: '',
            /*other options*/
        })
于 2019-12-16T23:13:56.167 回答
1 
$('.chosen-select').each(function() {
    var $this = $(this);
    $this.next().css({'width': '225px'});
});
于 2016-02-04T08:29:15.693 回答
0

使行太宽对小屏幕有一些问题，我将此自定义 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%;
   }
}
于 2019-10-15T18:05:09.700 回答