jquery select联动操作的小例子

(function(){
    //select操作
    $.fn.loadSelect = function(opt){
        opt = $.extend({}, {
            required:false,//为真则添加<option value="" selected="selected">required值</option>
            nodata:null,//子级无数据时 select 的状态。可设置为："none"(display隐藏) | "hidden"(visibility隐藏) | 无
            data:[],
            loadCall:function(){}
        }, opt);
        var d = {}, callback = function(data, s){
            var html = '';
            $.each(data||[], function(i,n){
                d = n.id ? n : {
                    id:i,
                    text:n
                };
                html += '<option value="'+d.id+'"'+((opt.def != undefined && (opt.def == d.id || opt.def == d.text)) ? ' selected="selected"' : '')+'>'+d.text+'</option>';
            });
            s.html(r+html);
            (r || html) && s.trigger('change');
            switch(opt.nodata){
                case 'none':
                    html === '' ? s.hide() : s.show();
                    break;
                case 'hidden':
                    s.css('visibility', html === '' ? 'hidden' : 'visible');
                    break;
            }
            $.isFunction(opt.loadCall) && opt.loadCall.call(s);
        }, r = opt.required ? '<option value="">'+($.type(opt.required) == 'string' ? opt.required : '-请选择-')+'</option>' : '';
        return this.each(function(){
            var s = $(this);
            if(s.is('select')){
                if(typeof(opt.data) === 'string'){
                    s.empty();
                    $.getJSON(opt.data, function(json){
                        callback(json, s);
                    });
                }else{
                    callback(opt.data, s);
                }
            }
        });
    },
    //select联动
    $.fn.linkage = function(opt){
        opt = $.extend({}, { // www.jb200.com
            build:true,//自动创建不存在的?
            selects:['#city', '#area'],//子集select,按顺序,jquery选择器(.#)
            seldef:[],//默认值,1以后和上项对应,可是id或者text
            required:true,
            nodata:'',
            url:'/company/getCity.html?id={$id}',//子数据,string,{$id} or {$text}页码信息
            data:[],//父级的数据
            def:0//父级默认值
        }, opt);
        var mkSelect = function(i){
            var n = child[i], nN = $(n);
            if( i && n && opt.build && nN.length === 0 ){
                var sn = n.substr(1), ci = n.substr(0, 1) == '#' ? 'id="'+sn+'"' : 'class="'+sn+'"';
                nN = $(child[i-1]).after('<select name="'+sn+'" '+ci+'></select>').next();
            }
           
            !nN.data('linkage') && nN.change(function(){
                mkSelect(i+1).loadSelect({
                    data: this.value ? opt.url.sprintf({
                        id: this.value,
                        text: this.selectedIndex >= 0 ? this.options[this.selectedIndex].text : ''
                    }) : [],
                    nodata:opt.nodata,
                    required:opt.required,
                    def:opt.seldef[i]||''
                });
            }).data('linkage', true);
           
            return nN;
        }, child = opt.selects||[];
        child.unshift(this);
        var s = mkSelect(0);
        opt.data.length && s.loadSelect({
            data:opt.data,
            def:opt.def
        });
        return this;
    },
    //jquery.printf
    String.prototype.sprintf = function(data, def) {
        return this.replace(/(?:{$)([wd-_]+)(?:})/g, function() {
            return data[arguments[1]]||def||'';
        });
    }
});
 

<div class="jumbotron">
    <h1>联动测试</h1>
    <select name="" id="addr_prv"></select>
</div>
<script type="text/javascript">
    In.ready(function(){
        $('#addr_prv').linkage({data:'/company/getCity.html',seldef:[37,567]});
    });
</script>