使用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屬性是導致問題的原因。 嘗試添加自己的類，而不是直接給標簽等樣式賦予樣式。