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

Question

我使用了很多 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>

JS

var slc = $('[data-plug="select2"]');

assignSelect(slc);

function assignSelect(selectElement) {

    selectElement.each(function(){

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

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

           $this.select2({
             k:v
           });

        });
        /*-- --*/

    });

}

我从相关元素的数据属性中获取选项并将其解析为 JSON，但我无法分配给插件。我怎样才能做到这一点？

Answer 1

也许我已经找到了解决您问题的方法
在此Fiddle两个选项的属性data-plug-op用于构建插件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>

获得相同结果的更合理的方法可能是 this Fiddle 我使用一些 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>

最后的解决方案可能是

(但为了简洁，我更喜欢第二种解决方案)

<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>