如何在select事件的Bootstrap双列表框中获得回调函数？

Question

我对前端开发有点新意.我在我的代码中使用这个[ demo ] Bootstrap DualListbox.当我将一个(或多个)项目从一个列表移动到另一个列表时,我需要先将它们保存到数据库中.如果DB操作成功执行,那么只有那些项应该移动到另一个列表.

我怎样才能做到这一点 ？我认为这个库中必定存在一些回调函数,但找不到.

任何帮助表示赞赏.

Answer 1

首先,我的建议是使用另一个库:http://crlcu.github.io/multiselect/ 我在我们的代码中使用,并且很好地展示了自己.

其次,如果您更喜欢使用Bootstrap DualListBox,则触发onchange事件,但仅限于第一个选择元素.

代码:https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox/blob/master/src/jquery.bootstrap-duallistbox.js#L44

所以,如果你想使用回调,只需在初始化dualbox之后立即添加calback(也在示例页面中运行):

$('.demo2').bootstrapDualListbox();
$('.demo2').on('change',function(){
    console.log('triggers');
})

UPD:只有在实际更改元素状态之前检查并执行操作的方法是在库代码中执行操作.

看208行:https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox/blob/master/src/jquery.bootstrap-duallistbox.js#L208

您可以创建函数actuallyMove(),复制函数内容move(),并move()使用您自己的代码清除函数.

您自己的代码必须检查操作,然后运行move().

另外,用moveAll功能做这个.

也许更好的方法是更新此库的API并使用pull请求进行更改(这样move()函数必须调用类似的东西this.onbeforechange并检查结果为true或false).

Answer 2

使用外部监听器。让我们select用 class配置它dual。

首先我们附加包的配置。

$('select.dual').bootstrapDualListbox({
    selectorMinimalHeight: 160
});

接下来我们忘记这个包并设置我们自己的监听器。

$('select.dual').on('change',function (e) {
    console.log($(this).val());
})

我希望看到我们可以缓冲状态的变化。

var lastState = $('select.dual').val();

$('select.dual').on('change',function (e) {
    var newState = $(this).val();                     
    console.log(lastState);                        // selected before
    console.log(newState);                         // selected now
    console.log($(lastState).not(newState).get()); // removed elements
    console.log($(newState).not(lastState).get()); // added elements
    lastState = newState;
})