美文网首页让前端飞
完美解决searchableselect不支持change事件的

完美解决searchableselect不支持change事件的

作者: 下一站前端 | 来源:发表于2017-07-01 10:41 被阅读0次

大家都知道,原生的select框很丑很丑,于是我们开发的时候通常会选择第三方插件。searchableselect.js就是这么一个插件,功能强大,还支持搜索框模糊搜索,废话不多说,上图。

image.png

但是呢,这个插件是不支持select的change事件的,所以用到级联效果的时候会很头疼。网上搜了很多,都没有可行的方案,于是自己开始尝试去解决这个问题。

其实,解决方法也挺简单,在插件作用下,原本的select框隐藏了,取而代之的是div的点击事件模拟select的选中事件,下面是主要逻辑代码:

selectItem: function(item){
      if(this.hasCurrentSelectedItem())
        this.currentSelectedItem.removeClass('selected');

      this.currentSelectedItem = item;
      item.addClass('selected');

      this.hoverItem(item);

      this.holder.text(item.text());
      var value = item.data('value');
      this.holder.data('value', value);
      this.element.val(value);

      if(this.options.afterSelectItem){
        this.options.afterSelectItem.apply(this);
      }
    }

上面的this.element就是被隐藏的select,所以,我们在模拟选中事件里面补上select的change事件就好了。jquery有一个trigger方法,能够模拟事件触发,所以,我们完整的解决代码如下:

selectItem: function(item){
      if(this.hasCurrentSelectedItem())
        this.currentSelectedItem.removeClass('selected');

      this.currentSelectedItem = item;
      item.addClass('selected');

      this.hoverItem(item);

      this.holder.text(item.text());
      var value = item.data('value');
      this.holder.data('value', value);
      this.element.val(value);
      this.element.trigger('change'); //模拟select触发change事件
      if(this.options.afterSelectItem){
        this.options.afterSelectItem.apply(this);
      }
    }

至此,问题就解决了,我们可以愉快的使用searchableselect了。

相关文章

网友评论

    本文标题:完美解决searchableselect不支持change事件的

    本文链接:https://www.haomeiwen.com/subject/xppwcxtx.html