当前位置：Gxlcms > AJAX > Ajax实现弹出式无刷新城市选择功能代码

Ajax实现弹出式无刷新城市选择功能代码

时间：2021-07-01 10:21:17 帮助过：31人阅读

本文实例讲述了Ajax实现弹出式无刷新城市选择功能。分享给大家供大家参考。具体如下：

这是一款很棒的全国城市选择效果，添加城市时先添加组：找到id是"selectSub"中select标签下，添加option标签，value属性递增，找到id是"selectSub"，按照原有格式添加div，其id属性递增；然后添加二级副选框选项：复制id是"selectSub"下任意input标签，粘贴在需要添加的位置即可，你想扩展的话，配合动态语言完全可以将城市从数据库中读取出来。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-ajax-dialog-cha-city-codes/

具体代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Ajax弹出式无刷新城市选择特效</title>
  6. <meta http-equiv="content-type" content="text/html;charset=gb2312">
  7. <style type="text/css">
  8. BODY {
  9.  FONT-SIZE: 12px; PADDING-TOP: 50px
  10. }
  11. H2 {
  12.  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
  13. }
  14. .bton {
  15.  BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
  16. }
  17. .cont {
  18.  PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
  19. }
  20. #main {
  21.  MARGIN: 0px auto; WIDTH: 400px
  22. }
  23. #selectItem {
  24.  BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; MARGIN-TOP: 10px; Z-INDEX: 2; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 0px
  25. }
  26. #preview {
  27.  BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN: 1px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
  28. }
  29. #result {
  30.  BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN-TOP: 10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
  31. }
  32. .tit {
  33.  PADDING-LEFT: 10px; MARGIN: 1px; LINE-HEIGHT: 20px; HEIGHT: 20px
  34. }
  35. .bgc_ccc {
  36.  BACKGROUND: #ccc
  37. }
  38. .bgc_eee {
  39.  BACKGROUND: #eee
  40. }
  41. .c_999 {
  42.  COLOR: #999
  43. }
  44. .pointer {
  45.  CURSOR: pointer
  46. }
  47. .left {
  48.  FLOAT: left
  49. }
  50. .right {
  51.  FLOAT: right
  52. }
  53. .cls {
  54.  CLEAR: both; FONT-SIZE: 0px; OVERFLOW: hidden; HEIGHT: 0px
  55. }
  56. #bg {
  57.  DISPLAY: none; Z-INDEX: 1; BACKGROUND: #ccc; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; opacity: 0.7
  58. }
  59. .hidden {
  60.  DISPLAY: none
  61. }
  62. .move {
  63.  CURSOR: move
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <DIV id="main">
  69.  <INPUT class="bton pointer" onclick="openBg(1);openSelect(1)" type="button" value="请选择" name="button">
  70.  <DIV id="result">
  71.  <DIV class="tit bgc_eee">
  72.  <H2>您已选择的城市汇总</H2>
  73.  </DIV>
  74.  <DIV class="cont" id="makeSureItem"></DIV>
  75.  </DIV>
  76. </DIV>
  77. <DIV id="bg"></DIV>
  78. <DIV class="hidden" id="selectItem">
  79.  <DIV class="tit bgc_ccc move" onmousedown="drag(event,this)">
  80.  <H2 class="left">请选择城市：</H2>
  81.  <SPAN class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</SPAN>
  82.  <SPAN class="pointer right" onclick="makeSure();">[确定]</SPAN>
  83.  </DIV>
  84.  <DIV class="cls"></DIV>
  85.  <DIV class="cont">
  86.  <DIV id="selectSub">
  87.  <SELECT style="MARGIN-BOTTOM: 10px" onchange="showSelect(this.value)" name="">
  88.  <OPTION value="0" selected>中国名城</OPTION> 
  89.  <OPTION value="1">魅力城市</OPTION>
  90.  <OPTION value="2">东北三省</OPTION>
  91.  <OPTION value="3">世界城市</OPTION>
  92.  </SELECT> 
  93.  <DIV id="c00">
  94.  <INPUT onclick="addPreItem()" type="checkbox" value="北京" name="ck00">北京
  95.  <INPUT onclick="addPreItem()" type="checkbox" value="福建" name="ck00">福建
  96.  <INPUT onclick="addPreItem()" type="checkbox" value="四川" name="ck00">四川
  97.  <INPUT onclick="addPreItem()" type="checkbox" value="江苏" name="ck00">江苏
  98.  </DIV>
  99.  <DIV id="c01">
  100.  <INPUT onclick="addPreItem()" type="checkbox" value="上海" name="ck01">上海
  101.  <INPUT onclick="addPreItem()" type="checkbox" value="云南" name="ck01">云南
  102.  <INPUT onclick="addPreItem()" type="checkbox" value="贵州" name="ck01">贵州
  103.  </DIV>
  104.  <DIV id="c02">
  105.  <INPUT onclick="addPreItem()" type="checkbox" value="黑龙江" name="ck01">黑龙江
  106.  <INPUT onclick="addPreItem()" type="checkbox" value="吉林" name="ck01">吉林
  107.  <INPUT onclick="addPreItem()" type="checkbox" value="辽宁" name="ck01">辽宁
  108.  </DIV>
  109.  <DIV id="c03">
  110.  <INPUT onclick="addPreItem()" type="checkbox" value="美国" name="ck01">美国
  111.  <INPUT onclick="addPreItem()" type="checkbox" value="阿富汗" name="ck01">阿富汗
  112.  <INPUT onclick="addPreItem()" type="checkbox" value="日本" name="ck01">日本
  113.  </DIV>
  114.  </DIV>
  115.  </DIV>
  116.  <DIV id="preview">
  117.  <DIV class="tit bgc_eee c_999">
  118.  <H2>您已选择：</H2>
  119.  </DIV>
  120.  <DIV class="cont" id="previewItem"></DIV>
  121.  </DIV>
  122. </DIV>
  123. <script type="text/javascript">
  124. var grow = $("selectSub").getElementsByTagName("option").length; //组数
  125. var showGrow = 0;//已打开组
  126. var selectCount = 0; //已选数量 
  127. showSelect(showGrow);
  128. var items = $("selectSub").getElementsByTagName("input");
  129. function $(o){
  130.  if(typeof(o) == "string")
  131.  return document.getElementById(o);
  132.  return o;
  133. }
  134. function openBg(state){
  135.  if(state == 1)
  136.  {
  137.   $("bg").style.display = "block";
  138.   var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;
  139.   $("bg").style.height = h + "px";
  140.  }
  141.  else
  142.  {
  143.   $("bg").style.display = "none";
  144.  } 
  145. }
  146. function openSelect(state){
  147.  if(state == 1) 
  148.  {
  149.   $("selectItem").style.display = "block";
  150.   $("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";
  151.   $("selectItem").style.top = document.body.scrollTop + 100 + "px";  
  152.  }
  153.  else
  154.  {
  155.   $("selectItem").style.display = "none";
  156.  }
  157. }
  158. function showSelect(id){
  159.  for(var i = 0 ; i < grow ;i++)
  160.  {
  161.   $("c0" + i).style.display = "none";
  162.  }
  163.  $("c0" + id).style.display = "block";
  164.  showGrow = id;
  165. }
  166. function open(id,state){ 
  167.  if(state == 1)
  168.  $(id).style.display = "block";
  169.  $(id).style.diaplay = "none";
  170. }
  171. function addPreItem(){ 
  172.  $("previewItem").innerHTML = "";
  173.  var len　= 0 ;
  174.  for(var i = 0 ; i < items.length ; i++)
  175.  {
  176.   if(items[i].checked == true)
  177.   {
  178.    var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value;
  179.    $("previewItem").innerHTML += mes;
  180.   }
  181.  }
  182. }
  183. function makeSure(){
  184.  openBg(0);
  185.  openSelect(0);
  186.  copyItem("previewItem","makeSureItem") 
  187. }
  188. function copyHTML(id1,id2){
  189.  $(id2).innerHTML = $("id1").innerHTML;
  190. }
  191. function copyItem(id1,id2){
  192.  
  193.  var mes = "";
  194.  var items2 = $(id1).getElementsByTagName("input");
  195.  for(var i = 0 ; i < items2.length ; i++)
  196.  {
  197.   if(items2[i].checked == true)
  198.   {
  199.   mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value;   
  200.   }
  201.  }
  202.  $(id2).innerHTML = "";
  203.  $(id2).innerHTML += mes;
  204. }
  205. function same(ck){
  206.  for(var i = 0 ; i < items.length ; i++)
  207.  {
  208.   if(ck.value == items[i].value)
  209.   {
  210.    items[i].checked = ck.checked;
  211.   }
  212.  }
  213. } 
  214. var oDrag = "";
  215. var ox,oy,nx,ny,dy,dx;
  216. function drag(e,o){
  217.  var e = e ? e : event;
  218.  var mouseD = document.all ? 1 : 0;
  219.  if(e.button == mouseD)
  220.  {
  221.   oDrag = o.parentNode;
  222.   ox = e.clientX;
  223.   oy = e.clientY;  
  224.  }
  225. }
  226. function dragPro(e){
  227.  if(oDrag != "")
  228.  { 
  229.   var e = e ? e : event;
  230.   dx = parseInt($(oDrag).style.left);
  231.   dy = parseInt($(oDrag).style.top);
  232.   nx = e.clientX;
  233.   ny = e.clientY;
  234.   $(oDrag).style.left = (dx + ( nx - ox )) + "px";
  235.   $(oDrag).style.top = (dy + ( ny - oy )) + "px";
  236.   ox = nx;
  237.   oy = ny;
  238.  }
  239. }
  240. document.onmouseup = function(){oDrag = "";}
  241. document.onmousemove = function(event){dragPro(event);}
  242. </script>
  243. </body>
  244. </html>

希望本文所述对大家的Ajax程序设计有所帮助。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！