带有 chosen-js 的多个选项 select

Question

我正在尝试使用 chosen-js 创建一个多选项选择器。

This codepen, shows what I'm trying and how it's different from what I'm expecting (e.g. this jsfiddle example)。下面的代码片段突出显示了相关的 html 和 js。我将 <select> 标签嵌套在 bootstrap4 container 和 col-12:

中

index.html

<div class="container">
    <div class="row" style="height: 100vh;">
        <div class="col-12 mt-4 mb-4 h-100" id="test">
            <div class="mt-4 header">
                <p>Choose some games!</p>
            </div>
            <select id="mySelectId" data-placeholder="Add skills..." class="chosen-select" multiple="multiple">
                <option value="Chess">Chess</option>
                <option value="Monopoly">Monopoly</option>
                <option value="Cards">Cards</option>
                <option value="Cluedo">Cluedo</option>
                <option value="Snap">Snap</option>
            </select>
        </div>
    </div>
</div>

choose.js

$(".chosen-select").chosen({width: "50%"});

虽然它在某种程度上起作用 - see pen - 行为不符合预期：

点击表格会自动选择并输入一个选项
单击表单后，选项列表是全宽的（与任何输入的文本重叠）并且在第一次出现后很快消失 - 希望这在 codepen

我是不是做错了什么？

Answer 1

我查了你的fiddle看到了款式

 .center_v a, h1, p, ul {
    position:relative;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

在那种风格中，转换属性是您遇到问题的原因。尝试添加您自己的 class 而不是直接将样式提供给 p ul.. 等标签

带有 chosen-js 的多个选项 select

Multiple options select with chosen-js

html

javascript

jquery

jquery-chosen