Selectr插件不能用於多個選擇實例？

Question

我正在使用selectbox JS插件樣式選擇框。 看起來插件在頁面上有多個選擇框實例時不會啓動。

Selectr插件： https://github.com/Mobius1/Selectr

演示： https://jsbin.com/haxamipizo/edit?html,js,output

這是我如何初始化插件按照文檔：

new Selectr('.selecting'); 

我失去了什麼？這是一個錯誤？

Answer 1

傳遞選擇器字符串時，使用的庫使用querySelector()。

https://github.com/Mobius1/Selectr/blob/master/src/selectr.js#L963

var Selectr = function(el, config) { 
    //.... 
    this.el = el; 

    // CSS3 selector string 
    if (typeof el === "string") { 
     this.el = document.querySelector(el); 
    } 

這意味着它只會搶相匹配的第一個元素。爲了獲得所有元素的啓動，你必須自己循環遍歷它們，每個調用new Selectr()。

document.querySelectorAll('.selecting').forEach(element=>{ 
    new Selectr(element); 
}); 

演示

document.querySelectorAll('.selecting').forEach(element => { 
 
    new Selectr(element); 
 
});

<select class="selecting"> 
 
\t <option vlaue="value-1">Value 1</option> 
 
\t <option vlaue="value-2">Value 2</option> 
 
\t <option vlaue="value-3">Value 3</option> 
 
\t ... 
 
</select> 
 

 
<div class="divider"> 
 

 
    <select class="selecting"> 
 
\t <option vlaue="value-1">Value 4</option> 
 
\t <option vlaue="value-2">Value 5</option> 
 
\t <option vlaue="value-3">Value 6</option> 
 
\t ... 
 
</select> 
 

 

 
    <div class="divider"> 
 

 
    <select class="selecting"> 
 
\t <option vlaue="value-1">Value 6</option> 
 
\t <option vlaue="value-2">Value 7</option> 
 
\t <option vlaue="value-3">Value 8</option> 
 
\t ... 
 
</select> 
 

 

 

 
    <link href="https://unpkg.com/mobius1-selectr@latest/dist/selectr.min.css" rel="stylesheet" type="text/css"> 
 
    <script src="https://unpkg.com/mobius1-selectr@latest/dist/selectr.min.js" type="text/javascript"></script>

Answer 2

然後，您可以通過傳遞一個引用您的選擇框作爲第一個參數實例Selectr ...（從Selectr github上）

看起來它會爲你工作，如果你會使用Selectr對象爲每個選擇標記，而不是集合。

因此，在您的html中將您的類名更改爲id，並創建多個Selectr對象。

new Selectr('#selecting1'); 
new Selectr('#selecting2'); 
new Selectr('#selecting3');