如何使 "Dual List Box plugin for jQuery and Bootstrap" 动态化？

Question

我想要 dual list box 是动态的。例如当用户点击某个link时，会调用一个方法，然后从数据库中获取列表，然后将这些数据显示在模态中。问题是它只适用于第一个运行。当我刷新页面时，它再次工作一次。

到目前为止，这是我的代码。

            function gettype2(id){
                $('#duallist').bootstrapDualListbox('destroy');
                $.post('" . yii::$app->request->baseUrl . "/accounts/gettype2',{'id':id},function(data){
                    $('#duallist').html(data);
                    var demo1 = $('#duallist').bootstrapDualListbox({infoTextFiltered: '<span class=\"label label-purple label-lg\">Filtered</span>'});
            var container1 = demo1.bootstrapDualListbox('getContainer');
            container1.find('.btn').addClass('btn-white btn-info btn-bold');
                });
            }

我正在制作一个用户角色权限页面。

第一次点击编辑link。（工作正常）

第二次点击。无法正常工作。

Answer 1

我通过删除模态主体中的 select 标签解决了这个问题，然后我添加了一个空的 div 标签。然后这段代码。

function gettype2(id){
                    $('#sample').html('<select multiple=\"multiple\" size=\"10\" name=\"duallistbox_demo1\" id=\"duallist\"></select>');
                    $('#duallist').bootstrapDualListbox('destroy');
                    $.post('" . yii::$app->request->baseUrl . "/accounts/gettype2',{'id':id},function(data){
                        $('#duallist').html(data);
                        var demo1 = $('#duallist').bootstrapDualListbox({infoTextFiltered: '<span class=\"label label-purple label-lg\">Filtered</span>'});
                var container1 = demo1.bootstrapDualListbox('getContainer');
                container1.find('.btn').addClass('btn-white btn-info btn-bold');
                    });
                }

如何使 "Dual List Box plugin for jQuery and Bootstrap" 动态化？

How to make "Dual List Box plugin for jQuery and Bootstrap" dynamic?

jquery

listbox

yii2-advanced-app