JQuery二级级联插件

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

/*
JQuery double select plugin
file: jquery.selectclass.js
author: shaoyun
site: devjs.com
email: shaoyun (at) yeah.net
date: 2009-6-16
*/
$.fn.SelectClass = function(options){
    var defaults = {
        bind1: '',
        bind2: '',
        data1:[],
        data2:[]
    };
    var opts = $.extend(defaults, options);
    var _self = this;
    _self.data("data1",["请选择...",""]);
    _self.data("data2",["请选择...",""]);
    if(defaults.bind1==""){
        _self.append("<select></select>&nbsp;");
    }else{
        _self.append("<select id='"+defaults.bind1+"' name='"+defaults.bind1+"'></select>&nbsp;");
    }
    if(defaults.bind2==""){
        _self.append("<select></select>");
    }else{
        _self.append("<select id='"+defaults.bind2+"' name='"+defaults.bind2+"'></select>");
    }
    var $sel1 = _self.find("select").eq(0);
    var $sel2 = _self.find("select").eq(1);
    if(_self.data("data1")){
        $sel1.append("<option value='"+_self.data("data1")[1]+"'>"+_self.data("data1")[0]+"</option>");
    }
    $.each( defaults.data1 , function(index,data){
        if(data.selected=='true'){
            $sel1.append("<option value='"+data.val+"' selected='selected'>"+data.txt+"</option>");
        }else{
            $sel1.append("<option value='"+data.val+"'>"+data.txt+"</option>");
        }
    });
    if(_self.data("data2")){
        $sel2.append("<option value='"+_self.data("data2")[1]+"'>"+_self.data("data2")[0]+"</option>");
    }
    var index1 = "" ;
    $sel1.change(function(){
        if(defaults.data2.length<=0) return;
        //清空第二个下拉框
        $sel2[0].options.length=0;
        index1 = this.selectedIndex;
        if(index1==0){  //当选择的为 “请选择” 时
            if(_self.data("data2")){
                $sel2.append("<option value='"+_self.data("data2")[1]+"'>"+_self.data("data2")[0]+"</option>");
            }
        }else{
            $.each( defaults.data2[index1-1] , function(index,data){
                if(data.selected=='true'){
                    $sel2.append("<option value='"+data.val+"' selected='selected'>"+data.txt+"</option>");
                }else{
                    $sel2.append("<option value='"+data.val+"'>"+data.txt+"</option>");
                }
            });
        }
    }).change();
};

使用方法如下：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.selectclass.js"></script>
<script type="text/javascript">
var sd1=[
        {txt:'main1',val:'1'},
        {txt:'main2',val:'2',selected:'true'}
    ];
var sd2=[[
        {txt:'item1.1',val:'1.1'},
        {txt:'item1.2',val:'1.2'}
    ],[
        {txt:'item2.1',val:'2.1'},
        {txt:'item2.2',val:'2.2',selected:'true'}
    ]];
$(function(){
    $("#demo").SelectClass({bind1:'s1',bind2:'s2',data1:sd1,data2:sd2});
});
</script>
<div id="demo"></div>

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