Select2Buttons的不规范改造

刚才不小心打开自己的博客，发现园龄5年多，太汗了，一直潜水。

今天下午小实现了一个功能，跑上来现宝一下。

 

Select2Buttons是一个能将网页中的select选择框转换成一组按钮的插件。

开源中国里的项目页面

http://www.oschina.net/p/select2buttons/similar_projects

 

自己的小系统里面，有个页面用到四个Select：A1、A2、B1、B2，两个A联动，两个B联动，通过JSON获取数据。但是觉得默认的Select太不美观不友好，之前用jqSelectable实现过，但感觉还是不太好，所以搜了个Select2Buttons来用，但是问题出现了：假设A1变更选项10次，理想情况下，A2跟着变就行，但是实际上，出现了10个A2。

 

打开Select2Buttons.js文件看了一下，代码倒是不多，主要是通过隐藏Select，再对Option遍历，转换成相应的Div。考虑到页面里四个Select都指定了id，所以打算把id写到Div的Class里，然后联动时把A2先Remove（），再重写Div。

经过各种菜鸟磕碰后，实现如下，

原代码：

 
   1   
   var $ = jQuery; 
   
 
   2      
   var select = $( 
   this); 
   
 
   3      
   var multiselect = select.attr('multiple'); 
   
 
   4     select.hide(); 
   
 
   5  
   
 
   6      
   var buttonsHtml = $('<div class="select2Buttons"></div>'); 
  

修改后：

 

 
   1  
   var $ = jQuery; 
   
 
   2  
   var select = $( 
   this); 
   
 
   3  
   var multiselect = select.attr('multiple'); 
   
 
   4 $('div.' + select.attr('id')).remove(); 
   
 
   5 select.hide(); 
   
 
   6  
   
 
   7  
   var buttonsHtml = $('<div class="select2Buttons ' + select.attr('id') + '"></div>'); 
  

 

刚刚在想remove()的时候如果能判断Div是不是已经存在的，会不会打击得更精确一些，但是如下两试都不行，

$('div').hasClass(select.attr('id')).remove();

$('div').is(select.attr('id')).remove();

求大大们指点！！

----------------------------------------------------------------------

 刚刚看到hasClass和is是返回true或false的，汗。继续找找看

----------------------------------------------------------------------

又看了看，好像这个没什么意义？