选择器插件不能与多个选择实例一起使用？

Question

我正在使用selectbox JS插件来设置selectobox的样式。 当页面上有多个选择框实例时，似乎插件未初始化。

选择器插件： https ： //github.com/Mobius1/Selectr

演示： https : //jsbin.com/haxamipizo/edit?html,js，输出

这就是我根据文档初始化插件的方式：

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"> <option vlaue="value-1">Value 1</option> <option vlaue="value-2">Value 2</option> <option vlaue="value-3">Value 3</option> ... </select> <div class="divider"> <select class="selecting"> <option vlaue="value-1">Value 4</option> <option vlaue="value-2">Value 5</option> <option vlaue="value-3">Value 6</option> ... </select> <div class="divider"> <select class="selecting"> <option vlaue="value-1">Value 6</option> <option vlaue="value-2">Value 7</option> <option vlaue="value-3">Value 8</option> ... </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 github）

如果您将Selectr对象用于每个select标记而不是集合，则看起来它会为您工作。

因此，在您的html中将您的类名称更改为id，并创建多个Selectr对象。

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