JQuery－－省市区的选择

 效果：


代码：

 1 function  showArea() {
 2 $("#addr").remove();
 3 var iptName=$(this).attr("id");
 4 var iptOffSet=$(this).offset();
 5 var iptLeft=iptOffSet.left-160;
 6 var iptTop=iptOffSet.top+20;
 7 var str="<div id='addr'><span>请选择地点<a id='fh'>返回省份列表</a><a id='gb'>[&nbsp;关闭&nbsp;]</a></span><ul></ul><div style='clear:both;'></div></div>";
 8 areasLen=provinceArr.length;
 9 var str2="";
10 for(var i=0;i<areasLen;i++){
11  str2=str2+"<li id='p"+provinceArr[i][0]+"'>"+provinceArr[i][1]+"</li>";
12 }
13 $("body").append(str);
14 $("#addr ul").append(str2);
15 $("#addr").css({left:iptLeft+"px",top:iptTop+"px"});
16 $("#addr span a#fh").bind("click",function(){
17  $("#addr ul").empty();
18  $("#addr ul").append(str2);
19  $("#addr ul li").bind("click",{iptn:iptName},liBind);
20 });
21 $("#addr span a#gb").bind("click",function(){
22  $("#addr").remove();
23 });
24 $("#addr ul li").bind("click",{iptn:iptName},liBind);
25}
26 function  setVal(event) {
27 var setipt2=event.data.ipt2;
28 var iptText=$(this).text();
29 var iptVal=$(this).attr("id");
30 $("#"+setipt2+"Val").val(iptVal.substring(1));//截取字符串
31 $("#"+setipt2).val(iptText);
32 $("#addr").css("display","none");
33}
34 function  liBind(event) {
35 var setipt=event.data.iptn;
36 var liId=$(this).attr("id");
37 var liText=$(this).text();
38 var pArr=eval(liId);
39 pLen=pArr.length;
40 if(pLen==0){
41  $("#"+setipt+"Val").val(liId.substring(1,6));//截取字符串
42  $("#"+setipt).val(liText);
43  $("#addr").css("display","none");
44  }
45 else{
46  listr="";
47  for(j=0;j<pLen;j++){
48   listr=listr+"<li id='c"+pArr[j][0]+"'>"+pArr[j][1]+"</li>";
49   }
50   $("#addr ul").empty();
51   $("#addr ul").append(listr);
52   $("#addr ul li").bind("click",{ipt2:setipt},setVal);
53  } 
54}

转载于:https://www.cnblogs.com/Ethan0728/archive/2009/02/02/Ethan.html