一个漂亮实用的下拉多选框的实现分析

这两天在写一个chrome插件，需要在popup页使用下拉多选框。用select看起来非常原始，多选还要按住ctrl键或者command键。
html代码如下：

    
        
    
    
          
            C++  
            C#  
            Object C  
            C  
         
    

效果如下，真是。。。

select下拉多选框效果图.png

看来必须要有css的加持，否则真是不堪入目。但是买的《CSS揭秘》一页还没看，远水解不了近渴。先在网上找找吧。
在free.js上找到了一个好方法。鉴于自己对html/css和jQuery只是一知半截，认真看了一遍free.js提供的代码，也算是学习了css和jQuery的实战用法。
先看下效果，一样的select，不一样的味道。css和jquery真是能化腐朽为神奇啊。

css和jquery加持后的效果图.png

html代码：

    
        
        
    
    
          
              
                C++  
                C#  
                Object C  
                C  
              
              
                JavaScript  
                PHP  
                ASP  
                JSP  
              
          

        
        
        
    

这里除了用到了select的multiple属性，还用到了optgroup属性。这个属性能将option分组。
除此之外，我们在html中还加了新的调料：css和jquery。
jquery和fSelect.js改变了html的样子。脚本执行后的html是这个样子的：

DOM.png

那么，我们怎么施了魔法，把html变了样呢？
先从入口说起吧。在前的