基于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！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
