<th>地区：</th>
          <td>&nbsp;<input type="text" name="province" id="province" value="点击选择" onFocus="h.p('province','city',this)" />省
          <input type="text" name="p" id="p" style="display:none;"/> 省编码
            <input type="text" name="c" id="c" style="display:none;"/> 城市编码
            <input type="text" name="selectCiyt" id="selectCiyt" style="display:none;"/> 已选择城市
          </td>
          <th>城市：</th>
          <td>&nbsp;<input type="text" name="city" id="city" /></td>城市

<script type="text/javascript" >
h={
$:function(e){return document.getElementById(e)},
//area:{
///*     北京:"北京",
//     上海:"上海",
//     广东:"广州,深圳,珠海,汕头,惠州,东莞,中山,佛山,湛江,云浮,从化,揭阳,梅州,肇庆,汕尾,韶关,番禺,茂名,潮阳,江门,三水,河源,高明,清远,潮州,增城,阳江,南海",
//     天津:"天津",
//　　 重庆:"黔江,重庆,万州,涪陵",
//　 　河北:"石家庄,邯郸,邢台,保定,张家口,承德,唐山,秦皇岛,沧州,廊坊,衡水",
//　　 山西:"太原,大同,阳泉,长治,朔州,榆次,临汾,运城,离石,晋中,忻州,晋城,吕梁",
//　　 内蒙古:"呼和浩特,包头,通辽,乌兰浩特,临河,海拉尔,阿拉善左,科尔沁翼中旗,巴彦浩特,乌海,集宁,赤峰,鄂尔多斯,锡林浩特,东胜,阿拉善左旗" ,
//　　 辽宁:"沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,铁岭,盘锦,葫芦岛,朝阳,锦西" ,
//　　 吉林:"长春,吉林,四平,辽源,通化,延吉,珲春,梅河口,白城,白山,松源,延边,松原" ,
//　　 黑龙江:"哈尔滨,齐齐哈尔,大庆,伊春,牡丹江,佳木斯,绥化,黑河,鸡西,七台河,双鸭山,鹤岗,大兴安岭" ,
//　　 江苏:"南京,徐州,连云港,淮安,宿迁,盐城,扬州,南通,镇江,常州,无锡,苏州,常熟,准阴,淮阴,泰州,张家港" ,
//　　 浙江:"杭州,宁波,嘉兴,湖州,绍兴,金华,衢州,舟山,温州,台州,嵊州,丽水" ,
//　　 安徽:"合肥,蚌埠,马鞍山,安庆,黄山,宿州,巢湖,阜阳,毫州,铜陵,宣城,宿县,芜湖,六安,滁州,淮北,池州,淮南" ,
//　　 福建:"福州,厦门,三明,莆田,泉州,漳州,南平,宁德,龙岩" ,
//　　 江西:"南昌,景德镇,新余,九江,鹰潭,上饶,宜春,吉安,赣州,抚州,萍乡" ,
//　　 山东:"济南,青岛,淄博,潍坊,烟台,威海,日照,德州,滨州,泰安,东营,济宁,聊城,莱芜,枣庄,临沂,菏泽,荷泽" ,
//　　 河南:"郑州,开封,洛阳,新乡,濮阳,商丘,南阳,周口,鹤壁,安阳,焦作,潢川,信阳,驻马店,三门峡,许昌,漯河,平顶山,巩义" ,
//　　 湖北:"武汉,襄樊,十堰,宜昌,荆门,孝感,黄岗,恩施,江汉,咸宁,天门,江陵,荆州,黄石,鄂州,随州" ,
//　　 湖南:"长沙,湘潭,衡阳,岳阳,常德,郴州,益阳,怀化,张家界,邵阳,吉首,娄底,安阳,永州,自治州,株洲" ,
//　　 广西:"南宁,柳州,桂林,北海,梧州,钦州,防城港,玉林,河池,防城,贵港,百色,贺州" ,
//　　 海南:"海口,三亚,儋州,海南" ,
//　　 四川:"成都,攀枝花,德阳,绵阳,自贡,内江,乐山,泸州,宜宾,雅安,甘孜,阿坝,康定,马尔康,涪陵,达州,西昌,遂宁,资阳,凉山,广安,广元,达川,眉山,巴中,南充" ,
//　　 贵州:"贵阳,遵义,安顺,六盘水,铜仁,黔东南,兴义,凯里,毕节,黔南,都匀,黔西南" ,
//　　 云南:"昆明,昭通,曲靖,思茅,丽江,楚雄,德宏,玉溪,版纳,红河,景洪,六库,文山,香格里拉,大理,保山,中甸,迪庆,潞西,个旧,迪庆州,临沧,怒江" ,
//　 　西藏:"拉萨,日喀则,阿里,那曲,山南,林芝,泽当,噶尔,昌都" ,
//　　 陕西:"西安,铜川,宝鸡,渭南,商州,商洛,延安,榆林,汉中,咸阳,安康" ,
//　　 甘肃:"兰州,金昌,天水,平凉,临夏,白银,陇南,定西,张掖,嘉峪关,酒泉,武威,庆阳,甘南州" ,
//　　 宁夏:"银川,石嘴山,银北,石咀山,银南,吴忠,固原" ,
//　　 青海:"西宁,平安,格尔木,玛沁,海东,玉树,共和,海南,黄南,海北,德令哈,海西,果洛,同仁,门源,海晏" ,
//　　 新疆:"乌鲁木齐,克拉玛依,吐鲁番,喀什,阿图什,库尔勒,伊犁,和田,奎屯,哈密,博乐,塔城,博州,阿克苏,阿勒泰,昌吉,伊宁,石河子,克州,咯会" ,*/
//　　 香港:"香港" ,
//　　 澳门:"澳门" ,
//　　 台湾:"台北",
//  其他:"其他"
//},
//areaId:{
//  100000:"100100" ,
//　　 200000:"200100" ,
//　　 300000:"300100",
//  400000:"400100"
//}

area:{<%=areas %>}, //areas 后台 读取数据库 省 城市
areaId:{<%=areasId %>}, // areasId  后台 读取数据库 省 城市 编码
p:function(op,oc,obj){//select province  
h.op=op;h.oc=oc;  
var i=0,shtml="",j=0; 
h.$("cit").innerHTML='';
for (var key in h.area)
{  
 j=0;
 for (var keyId in h.areaId)
 {
  if(i==j)
  {
   shtml+="<li style='float:left;word-break:keep-all;width:100px;'><input type='checkbox' style='border:none' name='"+keyId+"' id='"+ h.op+i+"' οnclick=h.c('"+key+"') value='"+key+"' /><label style='cursor:pointer' for='"+h.op+i+"'>"+key+"</label></li>";  
   break;
  }
  j++;
 }
 i++;  
};
h.$("pro").innerHTML=shtml;var left=parseInt(document.body.offsetWidth)-768;
h.ss(h.$("gb"),"display:block;position:absolute;top:"+(h.gp(obj)[1]+140)+"px;left:"+left/2+"px");
},

c:function(id){//set province value
var shtml='';
h.$(h.op).value=''
h.$(h.oc).value='';
var tp='',p='';
var xId=0;
h.$('p').value='';
h.$('c').value='';
for (var j=0;j<34;j++){ 
 var ck=document.getElementById('province'+j);
 if(ck.checked)
 {  
  var city=h.area[ck.value].split(","),cs=city.length;
  var cityId=h.areaId[ck.name].split(",")
  for(var i=0;i<cs;i++){
  　　var selectCity=h.$('selectCiyt').value.split("|");
  　　var selectLength=selectCity.length-1;
  　　var have=0;
  　　for(var z=0;z<selectLength;z++){
  　　    if(selectCity[z]==city[i])
  　　    {
  　　        shtml+="<li style='float:left;word-break:keep-all;width:100px;'><input type='checkbox' checked='checked' style='border:none' name='"+cityId[i]+"' οnclick=h.cp('"+city[i]+"') id='city"+xId+"'  value='"+city[i]+"' /><label style='cursor:pointer' for='city"+xId+"'>"+city[i]+"</label></li>";
              have=1;
          }
      }
      if(have==0)
          shtml+="<li style='float:left;word-break:keep-all;width:100px;'><input type='checkbox' style='border:none' name='"+cityId[i]+"' οnclick=h.cp('"+city[i]+"') id='city"+xId+"'  value='"+city[i]+"' /><label style='cursor:pointer' for='city"+xId+"'>"+city[i]+"</label></li>";
      xId++;
  };
  tp+=ck.value+"|";
  p+=ck.name+"|";
 };
};
//h.$('selectCiyt').value=selectCity;
h.$("cit").innerHTML=shtml;
//h.$(h.op).value=tp;
h.$('p').value=p;
//document.getElementById("<%=hfProvince.ClientID%>").value=p;
//alert(document.getElementById("<%=hfProvince.ClientID%>").value);
h.$('resultp').innerHTML=tp;
h.$('resultc').innerHTML=h.$(h.oc).value="";
},
cp:function(id){//set city value
    var shtml="";
    var xId=0,xJ=0;
 h.$(h.oc).value='';
 h.$('resultc').innerHTML='';
 h.$('c').value='';
 h.$('selectCiyt').value='';
    for (var j=0;j<100;j++){
  var ck=document.getElementById('city'+j);
  if(ck.checked && ck!=null)
  { 
   //h.$(h.oc).value+=ck.value+",";
   h.$('resultc').innerHTML+=ck.value+"|";
   h.$('c').value+=ck.name+"|";
   h.$('selectCiyt').value+=ck.value+"|";
  }
  xId++;
 }
 //h.$('selectCiyt').value+=h.$('resultc').innerHTML;
document.getElementById("<%=hfCity.ClientID%>").value=h.$('c').value;
//alert(document.getElementById("<%=hfCity.ClientID%>").value);
 h.$('cnn').innerHTML='';
},
init:function(){//install
var gv=document.createElement("div");
gv.innerHTML="<p><b>请选择省份:</b></p><div id='pro' style='clear:both;zoom:1'></div><p><b>地区:</b></p><div id='cit' style='clear:both;zoom:1;border-top:1px solid #282c38'><p align='center'>请先选择省份</p></div><p style='border-top:1px solid #282c38;color:#f60;padding:5px 0'><b>您的选择:</b><span id='resultp'></span> <span id='resultc'></span><input type='button' value='确定' style='color:#fff;background:#2782d6' οnclick='h.remove()'/><span id='cnn' style='color:#f00;font-weight:600'></span></p>";
gv.id="gb";h.ss(gv,"width:400px;padding:5px;display:none;background:#f7fff6;textAlign:left;border:1px solid #282c38");
document.body.appendChild(gv);
},
ss:function(obj,s){//set style to object
var sList = s.split(";");
for (var i=0,j; j=sList[i]; i++){
var k = j.split(":");
obj.style[k[0]] = k[1];
}
return obj;
},
gp: function(el) {//position
var valueT = 0, valueL = 0;
do {
valueT += el.offsetTop  || 0;
valueL += el.offsetLeft || 0;
el = el.offsetParent;
} while (el);
return [valueL, valueT];
},
remove:function(){
h.$('selectCiyt').value='';
h.$(h.op).value=h.$('resultp').innerHTML
h.$(h.oc).value=h.$('resultc').innerHTML;

var cl=h.$('cit').childNodes.length,sw=false;
var pv=h.$(h.op).value;
if(h.$(h.oc+'0')==null){
h.$('cnn').innerHTML='';
h.$('gb').style.display='none';

return true
}
else{
for(var i=0;i<cl;i++){
if(h.$(h.oc+i).checked==true){ 
sw=true;
 }
 sw=true;
};
}
if(sw){
h.$('cnn').innerHTML='';
h.$('gb').style.display='none';
}
else{
h.$('cnn').innerHTML='您尚未选择地区';
};
}
}
window.οnlοad=function(){
h.init();
}</script>