使用selected-js选择多个选项

Question

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

该 Codepen展示了我正在尝试的内容以及与期望的内容有何不同（例如jsfiddle示例 ）。 以下代码片段突出显示了相关的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%"});

当它在某种程度上起作用时（ 请参阅pen） ，其行为与预期不符：

• 单击表格会自动选择并输入一个选项
• 单击表单后，选项列表将变为全角（与任何输入的文本重叠），并在首次出现后迅速消失-希望这在代码笔中很明显

我做错了什么吗？

Answer 1

我检查了你的小提琴看到了一种风格

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

在这种样式中，transform属性是导致问题的原因。 尝试添加自己的类，而不是直接给标签等样式赋予样式。