考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:编程开发 > JSP > 文章内容
  

JSP教程:JavaScript实现城市选择控件的效果

 [ 2017年7月4日 ] 【

  在淘宝旅行上看到的城市选择效果,感觉还不错,就自己的理解重新实现一遍,先看效果(有人说IE9下面有BUG,LZ用的是落后的XP,居然装不上IE9,去公司在搞搞好了),然后再细说实现原理,支持鼠标上下键选择城市,支持直接输入城市名称,拼音首字母,全拼,支持IE6遮盖SELECT,压缩后12K。

  实现的步骤:

  一、先用一定的格式罗列出控件所需要的城市以及拼音等,我这里是按照如下格式罗列成一个数组, 如果需要增加城市,直接增加在数组里面即可:

  城市我是一个一个手打的。。。

  ['北京|beijing|bj','上海|shanghai|sh', '重庆|chongqing|cq']

  二、因为控件的城市分组按好几类划分,比如:按首字母HOT 、ABCDEFH 、 IJKLMNOP 、 QRSTUVWXYZ 四组划分,

  而划分了四组后又按照了首字母划分,所以我用正则表达式和循环把数组重新格式化为一个分组对象,热门城市取前16条。

  对象格式如下:

  {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{i:[1.2.3],j:[1,2,3]},QRSTUVWXYZ:{}}

  所用代码如下:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* *
 * 格式化城市数组为对象oCity,按照a-h,i-p,q-z,hot热门城市分组:
 * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{i:[1.2.3],j:[1,2,3]},QRSTUVWXYZ:{}}
 * */
  
(function () {
 var citys = Vcity.allCity, match, letter,
  regEx = Vcity.regEx,
  reg2 = /^[a-h]$/i, reg3 = /^[i-p]$/i, reg4 = /^[q-z]$/i;
 if (!Vcity.oCity) {
  Vcity.oCity = {hot:{},ABCDEFGH:{}, IJKLMNOP:{}, QRSTUVWXYZ:{}};
  //console.log(citys.length);
  for (var i = 0, n = citys.length; i < n; i++) {
   match = regEx.exec(citys[i]);
   letter = match[3].toUpperCase();
   if (reg2.test(letter)) {
    if (!Vcity.oCity.ABCDEFGH[letter]) Vcity.oCity.ABCDEFGH[letter] = [];
    Vcity.oCity.ABCDEFGH[letter].push(match[1]);
   } else if (reg3.test(letter)) {
    if (!Vcity.oCity.IJKLMNOP[letter]) Vcity.oCity.IJKLMNOP[letter] = [];
    Vcity.oCity.IJKLMNOP[letter].push(match[1]);
   } else if (reg4.test(letter)) {
    if (!Vcity.oCity.QRSTUVWXYZ[letter]) Vcity.oCity.QRSTUVWXYZ[letter] = [];
    Vcity.oCity.QRSTUVWXYZ[letter].push(match[1]);
   }
   /* 热门城市 前16条 */
   if(i<16){
    if(!Vcity.oCity.hot['hot']) Vcity.oCity.hot['hot'] = [];
    Vcity.oCity.hot['hot'].push(match[1]);
   }
  }
 }
})();

  三、然后先照着淘宝旅行里面的样子弄出HTML与CSS;这里略过。

  四、然后开始建立CitySelector构造函数,根据城市对象,构建生成DOM对象,在按照相应的事件触发。在生成相应的按照A\B\C\D……分组的时候遇到一个

  关于排序的问题,我的对象格式是这样的ABCDEFGH:{a:[1,2,3],b:[1,2,3],c:[1,2,3]},里面的小数组要按照字母的顺序排序,但是我用for……in循环生成

  出来是乱的,咨询了群里的高人后,处理方法如下:这里单独把KEY拿出来组成一个数组,然后排序后,在根据数组的值作为KEY值,来读取对象!

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sortKey=[];
   for(ckey in oCity[key]){
    sortKey.push(ckey);
    // ckey按照ABCDEDG顺序排序
    sortKey.sort();
   }
   for(var j=0,k = sortKey.length;j
    odl = document.createElement('dl');
    odt = document.createElement('dt');
    odd = document.createElement('dd');
    odt.innerHTML = sortKey[j] == 'hot'?' ':sortKey[j];
    odda = [];
    for(var i=0,n=oCity[key][sortKey[j]].length;i
     odda.push(str);
    }
首页 1 2 尾页
本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved