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

Question

我选择使用以制作有趣的组合框。一切正常，但我有一个问题。

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

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

Answer 1

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

1. 直接将＆＃34; width＆＃34; 的样式添加到 chosen.css 文件中的班级chzn-drop。
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"});

<强>结果：



希望你理解。

Answer 2

批准的答案是正确的，但是：您也可以对其进行设置，以便下拉列表获取托管其内容所需的宽度而不是固定值。我也做到了这一点，它不会小于选择框本身。

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

Answer 3

您可以选择初始化程序来设置width属性。

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

Answer 4

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

Answer 5

使行太宽会在小屏幕上出现一些问题，我将此自定义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%;
   }
}

Answer 6

要使其继承自原始选择的类的宽度，请使用空白宽度对其进行初始化。

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