Javascript 如何将select2插件分配给select元素，该元素在数据属性处具有作为json对象的插件选项？

我使用了很多select2插件，我想从相关元素的数据属性中分配插件的选项和选项值，如下所示

HTML

<select data-plug="select2" data-plug-op='{"placeholder":"text1","containerCssClass":"maincss"}'>
    <option></option>
</select>

<select data-plug="select2" data-plug-op='{"placeholder":"text2","containerCssClass":"maincss2","dropdownCssClass":"dropdowncss"}'>
    <option></option>
</select>

我从相关元素的数据属性中获取选项，并将其解析为JSON，但我无法将其分配给插件。我该怎么做呢？

试试下面的代码

function assignSelect(selectElement) {

selectElement.each(function(){

    var $this  = $(this),
        plugOp = $.parseJSON( $this.attr('data-plug-op') );

    /*-- --*/
    $.each(plugOp,function(k,v){

       $this.select2().data('placeholder', plugOp.placeholder).select2({
                    formatNoMatches: function (term) {
                        return 'no match "' + term + '" item';
                    },
                    allowClear: true,
                    containerCssClass : plugOp.containerCssClass,
                    dropdownCssClass: plugOp.dropdownCssClass

        });


    });
    /*-- --*/

});

}

---

也许我已经找到了解决你问题的办法
在本例中，两个选项中的属性数据plug op用于构建plugin select2对象。
因为在这种情况下，我不知道maincss和maincss2，所以我使用了宽度和占位符来区分这两个选项
代码似乎正常。第一个选项有一个占位符=“text1”，宽度为200
第二个选项有一个占位符=“text2”和宽度=400
您需要的所有jQuery代码都是

<script type="text/javascript">
$(document).ready(function() {
     $.each($('[data-plug="select2"]'),function(index){
         obj={}
         var $this  = $(this),
            plugOp = $.parseJSON( $this.attr('data-plug-op') );

        for(prop in plugOp) {
            obj[prop]=plugOp[prop]
        }
        $('[data-plug="select2"]:eq('+index+')').select2( $.extend({}, obj))
    })

});
</script>

$（文档）.ready（函数（）{
$。每个（$（'[data plug=“select2”]'）、函数（索引）{
obj={}
变量$this=$（this），
plugOp=$.parseJSON（$this.attr（'data-plug-op'））；
用于（插件中的道具）{
obj[prop]=plugOp[prop]
}
$（'[data plug=“select2”]：eq（'+index+'））。select2（$.extend（{}，obj））
})
});

获得相同结果的更简单的方法可能是 在这里，我使用了一些css来区分两个选项组

<script type="text/javascript">
$(document).ready(function() {
     $.each($('[data-plug="select2"]'),function(index){
         var $this  = $(this)
         var plugOp = $.parseJSON( $this.attr('data-plug-op') );
        $('[data-plug="select2"]:eq('+index+')').select2(plugOp)
    })
});
</script>

$（文档）.ready（函数（）{
$。每个（$（'[data plug=“select2”]'）、函数（索引）{
变量$this=$（this）
var plugOp=$.parseJSON（$this.attr（'data-plug-op'））；
$（'[data plug=“select2”]：eq（'+index+'））。选择2（plugOp）
})
});

最后一个解决方案可能是

（但为了简洁起见，我更喜欢第二种解决方案）

$（文档）.ready（函数（）{
var slc=$（'[data plug=“select2”]'）；
分配选择（slc）；
函数赋值选择（selectElement）{
selectElement.each（函数（）{
变量$this=$（this），
plugOp=$.parseJSON（$this.attr（'data-plug-op'））；
$this.select2（plugOp）；
});
}   
});

您只需将函数修改为：

function assignSelect(selectElement) {
    selectElement.each(function(){
        var $this  = $(this),
        plugOp = $.parseJSON($this.data('plug-op'));
        $this.select2(plugOp); // select2 accepts object as options, which plugOp is
    });
}

---

谢谢，但选项是可更改的，不仅仅是占位符containercsclass和dropdowncssclass。我只是举了一些例子。我想为每个元素动态创建插件选项，作为数据属性中的key:value

<script type="text/javascript">
$(document).ready(function() {
    var slc = $('[data-plug="select2"]');
    assignSelect(slc);
    function assignSelect(selectElement) {
        selectElement.each(function(){
            var $this  = $(this),
            plugOp = $.parseJSON($this.attr('data-plug-op'));
            $this.select2(plugOp);
        });
    }   
});
</script>

function assignSelect(selectElement) {
    selectElement.each(function(){
        var $this  = $(this),
        plugOp = $.parseJSON($this.data('plug-op'));
        $this.select2(plugOp); // select2 accepts object as options, which plugOp is
    });
}