JQuery二级级联插件

看到亮亮的博客上的一个二级联动，想起自己以前也写过的一个jquery的二级联动，也不藏私，发出来共享一下，这个插件还有待改进！

1. /*  
2. JQuery double select plugin  
3. file: jquery.selectclass.js  
4. author: shaoyun  
5. site: devjs.com  
6. email: shaoyun (at) yeah.net  
7. date: 2009-6-16  
8. */ 
9. $.fn.SelectClass = function(options){  
10.     var defaults = {  
11.         bind1: '',  
12.         bind2: '',  
13.         data1:[],  
14.         data2:[]  
15.     };  
16.     var opts = $.extend(defaults, options);  
17.     var _self = this;  
18.     _self.data("data1",["请选择...",""]);  
19.     _self.data("data2",["请选择...",""]);  
20.     if(defaults.bind1==""){  
21.         _self.append("<select></select>&nbsp;");  
22.     }else{  
23.         _self.append("<select id='"+defaults.bind1+"' name='"+defaults.bind1+"'></select>&nbsp;");  
24.     }  
25.     if(defaults.bind2==""){  
26.         _self.append("<select></select>");  
27.     }else{  
28.         _self.append("<select id='"+defaults.bind2+"' name='"+defaults.bind2+"'></select>");  
29.     }  
30.     var $sel1 = _self.find("select").eq(0);  
31.     var $sel2 = _self.find("select").eq(1);  
32.     if(_self.data("data1")){  
33.         $sel1.append("<option value='"+_self.data("data1")[1]+"'>"+_self.data("data1")[0]+"</option>");  
34.     }  
35.     $.each( defaults.data1 , function(index,data){  
36.         if(data.selected=='true'){  
37.             $sel1.append("<option value='"+data.val+"' selected='selected'>"+data.txt+"</option>");  
38.         }else{  
39.             $sel1.append("<option value='"+data.val+"'>"+data.txt+"</option>");  
40.         }  
41.     });  
42.     if(_self.data("data2")){  
43.         $sel2.append("<option value='"+_self.data("data2")[1]+"'>"+_self.data("data2")[0]+"</option>");  
44.     }  
45.     var index1 = "" ;  
46.     $sel1.change(function(){  
47.         if(defaults.data2.length<=0) return;  
48.         //清空第二个下拉框  
49.         $sel2[0].options.length=0;  
50.         index1 = this.selectedIndex;  
51.         if(index1==0){  //当选择的为 “请选择” 时  
52.             if(_self.data("data2")){  
53.                 $sel2.append("<option value='"+_self.data("data2")[1]+"'>"+_self.data("data2")[0]+"</option>");  
54.             }  
55.         }else{  
56.             $.each( defaults.data2[index1-1] , function(index,data){  
57.                 if(data.selected=='true'){  
58.                     $sel2.append("<option value='"+data.val+"' selected='selected'>"+data.txt+"</option>");  
59.                 }else{  
60.                     $sel2.append("<option value='"+data.val+"'>"+data.txt+"</option>");  
61.                 }  
62.             });  
63.         }  
64.     }).change();  
65. }; 

使用方法如下：

1. <script type="text/javascript" src="jquery.js"></script>  
2. <script type="text/javascript" src="jquery.selectclass.js"></script>  
3. <script type="text/javascript">  
4. var sd1=[  
5.         {txt:'main1',val:'1'},  
6.         {txt:'main2',val:'2',selected:'true'}  
7.     ];  
8. var sd2=[[  
9.         {txt:'item1.1',val:'1.1'},  
10.         {txt:'item1.2',val:'1.2'}  
11.     ],[  
12.         {txt:'item2.1',val:'2.1'},  
13.         {txt:'item2.2',val:'2.2',selected:'true'}  
14.     ]];  
15. $(function(){  
16.     $("#demo").SelectClass({bind1:'s1',bind2:'s2',data1:sd1,data2:sd2});  
17. });  
18. </script>  
19. <div id="demo"></div> 

感觉不方便定制，比如前面加个分类名称什么的，有机会了改改，目前只用在后台，感兴趣的不妨自己改。

转载于:https://www.cnblogs.com/shaoyun/archive/2009/06/16/1542294.html