Question

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

This Codepen，显示我正在尝试的内容以及它与期望的内容有何不同（例如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

我检查了您的小提琴看到的风格

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

在这种样式中，transform属性是导致问题的原因。尝试添加自己的类，而不是直接将样式赋予诸如p ul ..

之类的标签

使用selected-js选择多个选项

1 个答案: