基于jquery的城市选择插件

 1 /*
 2 *基于jquery的城市选择插件
 3 *author：youziclub
 4 *2015-4-22
 5 */
 6 ;(function($){
 7     $.fn.city=function(options){
 8         // 城市信息
 9         var nav=[‘热门‘,‘A-G‘,‘H-L‘,‘M-T‘,‘W-Z‘,‘其他‘];
10         var cityName=["上海,北京,广州,昆明,西安,成都,深圳,厦门,乌鲁木齐,南京,重庆,杭州,大连,长沙,海口,哈尔滨,青岛,沈阳,三亚,济南,武汉,郑州,贵阳,南宁,福州,天津,长春,石家庄,太原,兰州",
11         "安庆,阿勒泰,安康,鞍山,安顺,安阳,阿克苏,包头,蚌埠,北海,北京,百色,保山,博乐,长治,长春,长海,常州,昌都,朝阳,潮州,常德,长白山,成都,重庆,长沙,赤峰,大同,大连,达县,大足,东营,大庆,丹东,大理,敦煌,鄂尔多斯,恩施,二连浩特,佛山,福州,阜阳,富蕴,贵阳,桂林,广州,广元,赣州,格尔木,广汉,固原",
12         "呼和浩特,哈密,黑河,海拉尔,哈尔滨,海口,衡阳,黄山,杭州,邯郸,合肥,黄龙,汉中,和田,惠州,吉安,吉林,酒泉,鸡西,晋江,锦州,景德镇,嘉峪关,井冈山,济宁,九江,佳木斯,济南,喀什,昆明,康定,克拉玛依,库尔勒,喀纳斯,库车,兰州,洛阳,丽江,梁平,荔波,庐山,林芝,柳州,泸州,连云港,黎平,连城,拉萨,临沧,临沂",
13         "牡丹江,芒市,满洲里,绵阳,梅县,漠河,南京,南充,南宁,南阳,南通,那拉提,南昌,宁波,攀枝花,衢州,秦皇岛,庆阳,且末,齐齐哈尔,青岛,汕头,深圳,石家庄,三亚,沈阳,上海,思茅,鄯善,韶关,沙市,苏州,唐山,铜仁,通化,塔城,腾冲,台州,天水,天津,通辽,太原,吐鲁番",
14         "威海,武汉,梧州,文山,无锡,潍坊,武夷山,乌兰浩特,温州,乌鲁木齐,芜湖,万州,乌海,兴义,西昌,厦门,香格里拉,西安,襄阳,西宁,锡林浩特,西双版纳,徐州,兴城,兴宁,邢台,义乌,永州,榆林,延安,运城,烟台,银川,宜昌,宜宾,盐城,延吉,玉树,伊宁,伊春,珠海,昭通,张家界,舟山,郑州,中卫,芷江,湛江,中甸,遵义",
15         "香港,澳门,台湾"];    
16 
17         var getCityName = function(arr,index){
18             var cityList = arr[index].split(‘,‘);
19             for(var i=0,len=cityList.length; i<len; i++){
20                 $($(".city-catogory")[index]).append($(‘<a></a>‘,{"href" : "javascript: void(0);", "class" : "city-name", "title" : cityList[i], "text" : cityList[i]}));
21             }
22         };
23         
24         // 是否支持input输入
25         if(options.inputDisabled){
26             $(options.inputText).attr("readonly" , "readonly");
27         }
28         // dom节点操作
29         this.append($("<div></div>",{"class" : "city-choose","style" : "display: none;"}));
30         $(".city-choose").append($("<ul></ul>",{"class" : "nav-ul clearfix"}));
31         $(".city-choose").append($("<ul></ul>",{"class" : "cato-ul"}));    
32         for(var i=0,len=nav.length; i<len; i++){
33             $(".nav-ul").append($("<li></li>",{"class" : "city-nav", "text" : nav[i]}));
34             $(".cato-ul").append($("<li></li>",{"class" : "city-catogory"}));
35             $(".city-catogory").css(‘display‘,‘none‘);
36         }
37         
38         $($(".city-catogory")[0]).css("display" , "block");//当点击文本框时显示热门城市名称列表
39         var cityChoose = $($(".city-choose")[0]);//定义变量cityChoose和cityNav，加快查找效率
40         var cityNav=$(".city-nav");
41         // 点击文本输入框显示选择器
42         options.inputText.bind("focus",function(){ cityChoose.css("display","block");});
43         // 为选定标签设定样式
44         $(cityNav[0]).addClass("current");
45         
46         for(var i=0,len=cityNav.length; i<len; i++){
47             cityNav[i].index = i;//或采用闭包的方式
48             getCityName(cityName,i);//调用getCityName方法插入城市名称
49 
50             $(cityNav[i]).bind("click",function(){
51                 cityNav.removeClass("current");
52                 $(cityNav[this.index]).addClass("current");
53                 $(".city-catogory").css("display", "none")
54                 $($(".city-catogory")[this.index]).css("display", "block");
55             });
56         }
57         // 获取具体城市的a元素并绑定相应方法
58         var cityList = $(".city-name");
59         for(var i=0,len=cityList.length; i<len; i++){
60             cityList[i].index = i;
61             $(cityList[i]).bind("click",function(){
62                 $(options.inputText).val($(cityList[this.index]).text());
63                 cityChoose.css("display","none");
64             });
65         }
66         // 点击除选择器外的其他地方选择器隐藏（该处写的很糟糕，期待后面能想到更好的方式实现）
67         $(document.body).bind("click",function(e){
68             var events = e||window.event;
69             var targets = events.srcElement || events.target;
70             var targetClass = targets.className;
71             if(!((targets.id == "city-input")||(targetClass == "nav-ul clearfix"||targetClass == "city-nav current"||targetClass == "city-choose"||targetClass == "cato-ul"||targetClass == "city-catogory"))){
72                 cityChoose.css("display","none");
73             }
74         });
75 
76     };
77 
78 })(jQuery);

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