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 +defaults.bind1+"' name='"+defaults.bind1+"'></select>&nbsp;");
24. }
25. if(defaults.bind2==""){
26. _self.append("<select></select>");
27. }else{
28. _self.append("<select +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 ></div>

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