基于jquery的城市选择插件

时间：2024-03-26 14:37:26

城市选择插件的难度不是很大，主要是对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

相关文章