自定义select皮肤的三级联动下拉菜单

作者：简简单单 2011-11-07

代码如下

复制代码

自定义<a href="http://www.111com.net/tags.php/select">select</a>皮肤的省市县三级联动<a href="http://www.111com.net/tags.php/下拉菜单">下拉菜单</a>

   选择省

   选择市: 您还没选择省

   选择区县: 您还没选择市

   选择省

   选择市: 您还没选择省

   选择区县: 您还没选择市



  呕心之作:历经几个日夜的思索终于造出这么一段可以自定皮肤可以无数new的select省市县三级联动


  周折:


  1.得是用鼠标事件来模拟菜单效果,所以想匿名new出多个实例变的尤其困难;

  2.为了精练代码html主要用innerHTML生成,在ff中遇到了innerHTML出的东西找不到父级的bug,解决许久(仔细看代码你会发现一行很??碌恼腋讣兜拇??;

  3.数据整理不容易,为了重用,专门为取出原始数据写了个对象,好给用纯select来实现时能够重用;

  4.代码刚刚完工,还没来的及深加工提练精减;

  5.使用了闭包,json数据已经压到最小33KB,如果要一个页面上new出1000个来,估计内存会吃不消.

class_area.js文件内容如下

代码如下

复制代码

function getArea(province,city,district){this.dat={"和田地区":["和田市","和田县","墨玉县","皮山县","洛浦县","策勒县","于田县","民丰县"],"伊犁哈萨克自治州":["伊宁市","奎屯市","伊宁县","察布查尔锡伯自治县","霍城县","巩留县","新源县","昭苏县","特克斯县","尼勒克县"],"塔城地区":["塔城市","乌苏市","额敏县","沙湾县","托里县","裕民县","和布克赛尔蒙古自治县"],"阿勒泰地区":["阿勒泰市","布尔津县","富蕴县","福海县","哈巴河县","青河县","吉木乃县"],"省直辖行政单位":["石河子市","阿拉尔市","图木舒克市","五家渠市"]},"台湾省":"台湾省","香港特别行政区":"","澳门特别行政区":""}
this.text=['选择省','选择市','选择县'];this.pName=this.text[0];this.cName=this.text[1];this.dName=this.text[2];this.pDat=[];this.cDat=[];this.dDat=[];var p=province||'',c=city||'',d=district||'';this.init(province||'选择省',city||'选择省',district||'选择省');}
getArea.prototype={init:function(p,c,d){if(typeof this.dat[p]==='object'){this.pName=p;for(var i in this.dat[p])this.cDat.push(i);if(typeof this.dat[p][c]==='object'){this.cName=c;this.dName=d;for(var i=0,j;j=this.dat[p][c][i++];)this.dDat.push(j);}}
for(var i in this.dat)this.pDat.push(i);},getCity:function(province){this.pName=province;this.cName=this.text[1];this.dName=this.text[2];this.cDat=[];this.dDat=[];var obj=this.dat[this.pName];for(var i in obj){this.cDat.push(i);}},getDistrict:function(city){this.cName=city;this.dName=this.text[2];this.dDat=[];var obj=this.dat[this.pName][this.cName];for(var i=0,j;j=obj[i++];)
this.dDat.push(j);}}

上一个：省市县三级联动下拉菜单（json数据格式）下一个：Linux服务器下的Shell常用命令总结

相关文章

精彩推荐