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

Question

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

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

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

Answer 1

是的,这是可能的.这可以通过两种方式完成:

1. 直接在selected.css文件中向类添加样式"width".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'});