如何为jQuery和Bootstrap制作＆＃34; Dual List Box插件＆＃34;动态？

Question

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

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

            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');
                });
            }

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

首先点击编辑链接。 （工作正常）

第二次点击。不能正常工作。

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');
                    });
                }