基于jquery的城市选择插件

城市选择插件的难度不是很大，主要是对dom节点的操作。而我写的这个插件相对功能比较简答，没有加入省市联动。

上代码好了，参照代码的注释应该比较好理解。

/*
*基于jquery的城市选择插件
*author：youziclub
*2015-4-22
*/
;(function($){
    $.fn.city=function(options){
        // 城市信息
        var nav=['热门','A-G','H-L','M-T','W-Z','其他'];
        var cityName=["上海,北京,广州,昆明,西安,成都,深圳,厦门,乌鲁木齐,南京,重庆,杭州,大连,长沙,海口,哈尔滨,青岛,沈阳,三亚,济南,武汉,郑州,贵阳,南宁,福州,天津,长春,石家庄,太原,兰州",
        "安庆,阿勒泰,安康,鞍山,安顺,安阳,阿克苏,包头,蚌埠,北海,北京,百色,保山,博乐,长治,长春,长海,常州,昌都,朝阳,潮州,常德,长白山,成都,重庆,长沙,赤峰,大同,大连,达县,大足,东营,大庆,丹东,大理,敦煌,鄂尔多斯,恩施,二连浩特,佛山,福州,阜阳,富蕴,贵阳,桂林,广州,广元,赣州,格尔木,广汉,固原",
        "呼和浩特,哈密,黑河,海拉尔,哈尔滨,海口,衡阳,黄山,杭州,邯郸,合肥,黄龙,汉中,和田,惠州,吉安,吉林,酒泉,鸡西,晋江,锦州,景德镇,嘉峪关,井冈山,济宁,九江,佳木斯,济南,喀什,昆明,康定,克拉玛依,库尔勒,喀纳斯,库车,兰州,洛阳,丽江,梁平,荔波,庐山,林芝,柳州,泸州,连云港,黎平,连城,拉萨,临沧,临沂",
        "牡丹江,芒市,满洲里,绵阳,梅县,漠河,南京,南充,南宁,南阳,南通,那拉提,南昌,宁波,攀枝花,衢州,秦皇岛,庆阳,且末,齐齐哈尔,青岛,汕头,深圳,石家庄,三亚,沈阳,上海,思茅,鄯善,韶关,沙市,苏州,唐山,铜仁,通化,塔城,腾冲,台州,天水,天津,通辽,太原,吐鲁番",
        "威海,武汉,梧州,文山,无锡,潍坊,武夷山,乌兰浩特,温州,乌鲁木齐,芜湖,万州,乌海,兴义,西昌,厦门,香格里拉,西安,襄阳,西宁,锡林浩特,西双版纳,徐州,兴城,兴宁,邢台,义乌,永州,榆林,延安,运城,烟台,银川,宜昌,宜宾,盐城,延吉,玉树,伊宁,伊春,珠海,昭通,张家界,舟山,郑州,中卫,芷江,湛江,中甸,遵义",
        "香港,澳门,*"];    

        var getCityName = function(arr,index){
            var cityList = arr[index].split(',');
            for(var i=0,len=cityList.length; i<len; i++){
                $($(".city-catogory")[index]).append($('<a></a>',{"href" : "javascript: void(0);", "class" : "city-name", "title" : cityList[i], "text" : cityList[i]}));
            }
        };
        
        // 是否支持input输入
        if(options.inputDisabled){
            $(options.inputText).attr("readonly" , "readonly");
        }
        // dom节点操作
        this.append($("<div></div>",{"class" : "city-choose","style" : "display: none;"}));
        $(".city-choose").append($("<ul></ul>",{"class" : "nav-ul clearfix"}));
        $(".city-choose").append($("<ul></ul>",{"class" : "cato-ul"}));    
        for(var i=0,len=nav.length; i<len; i++){
            $(".nav-ul").append($("<li></li>",{"class" : "city-nav", "text" : nav[i]}));
            $(".cato-ul").append($("<li></li>",{"class" : "city-catogory"}));
            $(".city-catogory").css('display','none');
        }
        
        $($(".city-catogory")[0]).css("display" , "block");//当点击文本框时显示热门城市名称列表
        var cityChoose = $($(".city-choose")[0]);//定义变量cityChoose和cityNav，加快查找效率
        var cityNav=$(".city-nav");
        // 点击文本输入框显示选择器
        options.inputText.bind("focus",function(){ cityChoose.css("display","block");});
        // 为选定标签设定样式
        $(cityNav[0]).addClass("current");
        
        for(var i=0,len=cityNav.length; i<len; i++){
            cityNav[i].index = i;//或采用闭包的方式
            getCityName(cityName,i);//调用getCityName方法插入城市名称

            $(cityNav[i]).bind("click",function(){
                cityNav.removeClass("current");
                $(cityNav[this.index]).addClass("current");
                $(".city-catogory").css("display", "none")
                $($(".city-catogory")[this.index]).css("display", "block");
            });
        }
        // 获取具体城市的a元素并绑定相应方法
        var cityList = $(".city-name");
        for(var i=0,len=cityList.length; i<len; i++){
            cityList[i].index = i;
            $(cityList[i]).bind("click",function(){
                $(options.inputText).val($(cityList[this.index]).text());
                cityChoose.css("display","none");
            });
        }
        // 点击除选择器外的其他地方选择器隐藏（该处写的很糟糕，期待后面能想到更好的方式实现）
        $(document.body).bind("click",function(e){
            var events = e||window.event;
            var targets = events.srcElement || events.target;
            var targetClass = targets.className;
            if(!((targets.id == "city-input")||(targetClass == "nav-ul clearfix"||targetClass == "city-nav current"||targetClass == "city-choose"||targetClass == "cato-ul"||targetClass == "city-catogory"))){
                cityChoose.css("display","none");
            }
        });

    };

})(jQuery);

调用：

<div id="city">
        <label for="city">城市选择：<input id="city-input" type="text"></label>
</div>
<script type="text/javascript">
     $(function(){
        var inputText = $("#city input");
        // inputText表示input元素，inputDisabled表示是否支持输入：true不支持，false支持
        $("#city").city({"inputText" : inputText, "inputDisabled" : true});
     });
10 </script>

 源文件：https://github.com/Runlikewind/front-end-test/tree/master/demo/city