基于jquery的多选下拉列框再次更改样式和交互

  今天给已有控件增加了一个功能,费了很大的劲,来个blog记录一下过程:

  先上图:

       

  上图为jquery的可搜索多选下拉列框,ui交互方面与我们项目的产品经理、设计的理念有别,所以我们后期就做成了这个样子:

     需求:点‘全选’时,不选择选项中的‘合计’;鼠标选择‘合计’时,其它选项自动不选;选择其它选项时,如果‘合计’是选中状态,则自动变为不选;

     方法:

    1. 新的下拉列表是在jquery原有的基础上给每个input外加了一个div,用class控制样式,替换原生的checkbox的图片,如下:

      所以要控制Item选中或者不选,得先从最外面一层来修改,即修改最外层图片的‘选中’与‘不选中’的样式,以下为鼠标点击记录时的处理(select all的处理略过):

      

       更改完第一步时,鼠标操作下拉列框已经可以满足需求了,但是传给后台的值不正确,因为只是更改了最表面的样式,内部的input没有任何改变。所以Next;

              2. 更改input的样式:

      点击多选框的下拉列表选项都会触发jquery.multiselect.js中的delegate方法,所以在此方法中增加对需求中情况的判断,并改变相应的input的checked属性;全选对应的是CheckAll方法,类似处理。

      去掉第一步中增加的class属性就可以看到input的状态了,暴漏出来可以更方便测试:

      

      第二步完成后,可以同步外面的图片和input的值,但是发现请求传给后台的值还是有问题,比如$('#platformSelect').val(), 明显下拉列表里面没选择‘合计’,但是还是给后台传有‘合计’的key,所以分析可知.val()方法并不是读取input的checked属性来获取值的。

     3. 更改option的样式:

      select元素的value是从<option>属性中获取,所以input的改变最终还是要再一次关联到option,才能彻底。所以有了以下代码,根据select来找到option,遍历option,设置和input元素对应的记录的selected属性值。

      

     

    三步搞完,Done!

    

    

        

原文地址:https://www.cnblogs.com/annyliu/p/3614481.html