重新加载后,SumoSelect不会打开

时间:2017-11-24 15:40:52

标签: javascript jquery plugins multi-select sumoselect.js

我在网络上的输入中使用了sumoselect

问题是 - 如果你打开第二个sumoselect,之后你想先打开 - 然后点击第一个并且他没有打开......

我的代码:

$('.country').SumoSelect({placeholder: 'first'});
$('.anotherSumo').SumoSelect({placeholder: 'second'});

$('.anotherSumo').on('sumo:closing', function(e) {

  $('.country').empty();
  $('.country').append('<option value="newValue">newValue</option>');
  $('.country')[0].sumo.reload({placeholder: 'first'});
});

这是工作小提琴。只需打开第二个选择,然后尝试打开 - 2次点击。按相反顺序 - 首先点击打开第一个相扑,然后第二次点击第二个相扑就可以了......

我在重新加载后尝试添加$('country').trigger("click");但没有

https://jsfiddle.net/eqa9og2v/5/

我需要知道如何在第二次点击时以任何方式打开第一个相扑,但是在sumoselect关闭时使用功能触发器 - 因为第一个用户做出选择,如果用户完成了选择选项,则关闭sumoselect(打开另一个或仅关闭)

3 个答案:

答案 0 :(得分:2)

我认为你试图实现的方式是不可行的,并且无法实现,因为当你点击第一个打开它时,会调用第二个下拉关闭,你再次重新创建第一个。因此,第一个下拉列表的实际点击将丢失,因为所有新绑定都会添加到第一个下拉列表中。

如果你想要实现它,你必须更改插件中的代码,这不是一个好习惯。此外,您可以强制第一个下拉列表使用$('.sumo_country').addClass('open').attr('aria-expanded', 'true');显示选项,但是再次关闭下拉列表,您必须第一次点击两次。

更改任何依赖于其他值的下拉值的正确且可行的方法是使用下拉列表的change函数。

在您的情况下,您必须在选择值时更改数据,或者从第二个下拉菜单中取消选择,这对您有用。

答案 1 :(得分:1)

这是一个有效的例子。正如您在评论中提到的那样,您希望在从第二个选择内容后更改第一个选择,而不是在关闭之后。 .on('change', ...)似乎可以解决问题。

https://jsfiddle.net/eqa9og2v/6/

答案 2 :(得分:0)

所以我想通了......有办法做到这一点!我需要这样做 - 如果你有一些通知或任何欢迎你。

我的代码:

$('.country').SumoSelect({placeholder: 'first'});
$('.anotherSumo').SumoSelect({placeholder: 'second'});

$('.anotherSumo').on('sumo:closed', function(e) { 

    var count = $('.country option').length;

    for(var i = 0; i < count; i++) {
        $('.country')[0].sumo.remove(0);    
    }

    $('.country')[0].sumo.add('newValue','newValue', 0);
});

工作小提琴: https://jsfiddle.net/eqa9og2v/7/

注意:如果您需要正确工作输入(对于发送表单或内容),您需要以自己的方式在option中添加/删除select元素...