发个自己写的2级联动插件

本帖最后由 kuku 于 2009-7-23 17:28 编辑

[code]<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="linkage.js"></script>
<script type="text/javascript" src="city.js"></script>
[/code]


可以扩展
演示地址：http://xph.517800.cn/linkage/

[code]city.js
var cities = {
     "北京":["昌平区","朝阳区","崇文区","大兴区","东城区","丰台区","海淀区","石景山区","通州区","西城区","宣武区","密云县","延庆县"],
     "上海":["长宁区","虹口区","黄浦区","静安区","卢湾区","浦东新区","普陀区","徐汇区","杨浦区","闸北区","闵行区","奉贤区","青浦区","松江区","南汇区","嘉定区","宝山区","金山区","崇明县"],
     "天津":["北辰区","大港区","东丽区","汉沽区","和平区","河北区","河东区","河西区","红桥区","津南区","南开区","塘沽区","西青区","蓟县","静海县","宁河县"],
     "重庆":["巴南区","北培区","大渡口区","涪陵区","江北区","九龙坡区","南岸区","黔江区","沙坪坝区","双桥区","万盛区","万州区","渝北区","渝中区","城口县","大足县","垫江县","丰都县","奉节县","合川市","江津市","开县","梁平县","南川市","彭水苗族土家族自治县","荣昌县","石柱土家族自治县","铜梁县","巫山县","巫溪县","武隆县","秀山土家族苗族自治县","永川市","酉阳土家族苗族自治县","云阳县","忠县","潼南县","璧山县","綦江县"],
     "香港":["香港"],
     "澳门":["澳门"],
     "河北":["石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州","廊坊","衡水"],
     "山西":["太原","大同","阳泉","长治","晋城","朔州","晋中","运城","忻州","临汾","吕梁"],
     "内蒙古":["呼和浩特","包头","乌海","赤峰","通辽","鄂尔多斯","呼伦贝尔","巴彦淖尔","乌兰察布","兴安","锡林郭勒","阿拉善"],
     "辽宁":["沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛"],
     "吉林":["长春","吉林","四平","辽源","通化","白山","松原","白城","延边"],
     "黑龙江":["哈尔滨","齐齐哈尔","鸡西","鹤岗","双鸭山","大庆","伊春","佳木斯","七台河","牡丹江","黑河","绥化","大兴安岭"],
     "江苏":["南京","苏州","扬州","无锡","徐州","常州","南通","连云港","淮安","盐城","镇江","泰州","宿迁"],
     "浙江":["杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水"],
     "安徽":["合肥","芜湖","蚌埠","淮南","马鞍山","淮北","铜陵","安庆","黄山","滁州","阜阳","宿州","巢湖","六安","亳州","池州","宣城"],
     "福建":["福州","宁德","南平","厦门","莆田","三明","泉州","漳州"],
     "江西":["南昌","上饶","萍乡","九江","景德镇","新余","鹰潭","赣州","吉安","宜春","抚州"],
     "山东":["济南","青岛","淄博","枣庄","东营","烟台","潍坊","威海","济宁","泰安","日照","莱芜","临沂","德州","聊城","滨州","菏泽"],
     "河南":["郑州","开封","洛阳","平顶山","焦作","鹤壁","新乡","安阳","濮阳","漯河","许昌","三门峡","南阳","商丘","信阳","周口","驻马店"],
     "湖北":["武汉","十堰","襄樊","鄂州","黄石","荆州","宜昌","荆门","孝感","黄冈","咸宁","随州","恩施"],
     "湖南":["长沙","株洲","湘潭","岳阳","邵阳","常德","衡阳","张家界","益阳","郴州","永州","怀化","娄底","湘西"],
     "广东":["广州","清远","潮州","东莞","珠海","深圳","汕头","韶关","佛山","江门","湛江","茂名","肇庆","惠州","梅州","汕尾","阳江","河源","中山","揭阳","云浮"],
     "广西":["南宁","柳州","桂林","梧州","北海","防城港","钦州","贵港","玉林","百色","贺州","河池","来宾","崇左"],
     "海南":["海口","三亚"],
     "四川":["成都","自贡","攀枝花","泸州","德阳","绵阳","广元","遂宁","内江","乐山","南充","宜宾","广安","达州","眉山","雅安","巴中","资阳","阿坝","甘孜","凉山"],
     "贵州":["贵阳","六盘水","遵义","安顺","铜仁","毕节","黔西南","黔东南","黔南"],
     "云南":["昆明","曲靖","玉溪","保山","昭通","丽江","普洱","临沧","文山","红河","西双版纳","楚雄","大理","德宏","怒江","迪庆"],
     "西藏":["拉萨","昌都","山南","日喀则","那曲","阿里","林芝"],
     "陕西":["西安","铜川","宝鸡","咸阳","渭南","延安","汉中","榆林","安康","商洛"],
     "甘肃":["兰州","白银","定西","敦煌","嘉峪关","金昌","天水","武威","张掖","平凉","酒泉","庆阳","临夏","陇南","甘南"],
     "青海":["西宁","海东","海北","黄南","海南","果洛","玉树","海西"],
     "宁夏":["银川","石嘴山","吴忠","固原","中卫"],
     "新疆":["乌鲁木齐","克拉玛依","吐鲁番","哈密","和田","阿克苏","喀什","克孜勒苏柯尔克孜","巴音郭楞蒙古","昌吉","博尔塔拉蒙古","伊犁哈萨克","阿勒泰"],
     "台湾":["台北","高雄","基隆","台中","台南","新竹","嘉义"]
};[/code]

[code]如果需要这样的select：
<option value="北京">beijing</option>


可以定义成这样：
cities = {
     "北京::beijing":["昌平区::cpc","朝阳区","崇文区","大兴区","东城区","丰台区","海淀区","石景山区","通州区","西城区","宣武区","密云县","延庆县"],

即以1个“::”区分
[/code]

[code]linkage.js
/*

* jQuery - 2级联动插件

*

* 参数说明

* id:2级联动的关联select的id名

* json:json数组

* 调用样式参考:$("#menu_level_1").linkage(json,"menu_level_2");

*/



$.fn.extend({  

    linkage:function(json,id){  

        var menu_level1_array = [];

                var menu_level2_array = [];

                var menu_level2_f_array = [];

                var st = "::";

                $.each(json,function(i,n){

                        menu_level1_array.push(i);

                        $.each(n,function(ii,nn){

                                menu_level2_f_array.push(nn);

                        })

                        menu_level2_array.push(menu_level2_f_array);

                        menu_level2_f_array = [];

                 });

                var level_1 = $(this);  // 关联到的select的ID

                var menu_level1_option = "<option value=''>--请选择--</option>";

                for(var i=0;i<menu_level1_array.length;i++){

                        var level1_array = menu_level1_array.split(st);

                        var l11,l12;

                        if(typeof(level1_array[1]) != "undefined"){

                                l12 = level1_array[1];

                                l11 = level1_array[0];

                        }else{

                                l12 = menu_level1_array;

                                l11 = menu_level1_array;

                        }

                        menu_level1_option += "<option value="+l11+">" + l12 + "</option>";

                }

                level_1.append(menu_level1_option);



                var level_2 = $("#"+id);

                level_2.append("<option value=''>--请选择--</option>");

                level_2.attr("disabled","disabled"); // 作的一个特效，数据没有载入成功时，处于屏蔽状态，并显示--请选择--.



                $(this).change(function(){

                        level_2.removeAttr("disabled");

                        $("#"+id+" option").remove();  // remove option

                        var p = level_1.attr('selectedIndex')-1;

                        if(p >= 0){

                                //var menu_level2_option = "<option value=''>--请选择--</option>";

                                var menu_level2_option = "";

                                for(var i=0;i<menu_level2_array[p].length;i++){

                                        var level21_array = menu_level2_array[p].split(st);

                                        var l21,l22;

                                       

                                        if(typeof(level21_array[1]) != "undefined"){

                                                l22 = level21_array[1];

                                                l21 = level21_array[0];

                                        }else{

                                                l22 = menu_level2_array[p];

                                                l21 = menu_level2_array[p];

                                        }

                                       

                                        menu_level2_option += "<option value="+l21+">" + l22 + "</option>";

                                }

                                level_2.append(menu_level2_option);

                        }else{

                                level_2.append("<option value=''>--请选择--</option>");

                                level_2.attr("disabled","disabled"); // 作的一个特效，数据没有载入成功时，处于屏蔽状态，并显示--请选择--

                        }

                });

               

     }  

   

}); [/code]

[code]具体实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2级城市联动</title>
</head>

<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="plugin/linkage.js"></script>
<script type="text/javascript" src="city.js"></script>//变量也可以在下面定义
<script type="text/javascript">
$(function() {
        //menu_level_1为触发事件的select的id名，menu_level_2为受影响的select的id名,cities为json对象
        $("#menu_level_1").linkage(cities,"menu_level_2");
        //可多次使用,cities可以替换为其他json对象
        $("#menu_level_3").linkage(cities,"menu_level_4");
});
</script>
<form name="myform" id="myform" class="myform">
<p>省份1:<select id="menu_level_1" class="selectmenu" name="province"></select></p>
<p>城市1:<select id="menu_level_2" class="selectmenu" name="city"></select></p>
<p>省份2:<select id="menu_level_3" class="selectmenu" name="province2"></select></p>
<p>城市2:<select id="menu_level_4" class="selectmenu" name="city2"></select></p>
</form>      
</body>
</html>[/code]

[code]单个使用：$("#menu_level_1").linkage(cities)[/code]

测试过，各浏览器都无问题，希望方便大家

还有各位如果有需要写插件可以Q我，免费帮忙制作

很不错 谢谢了