设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 14|回复: 0

[未分类] 省市县级联

[复制链接]
发表于 2018-8-10 21:25:24 | 显示全部楼层 |阅读模式
JS:
  1. 1 <!DOCTYPE html >
  2. 2 <
  3. html >
  4. 3 <
  5. head >
  6. 4 <
  7. title > </title >
  8. 5 <
  9. meta charset="utf-8" >
  10. 6 </head >
  11. 7 <
  12. body >
  13. 8 <
  14. select >
  15. 9 <
  16. option >---请选择省--- </option >
  17. 10 </select >
  18. 11 <
  19. select >
  20. 12 <
  21. option >---请选择市--- </option >
  22. 13 </select >
  23. 14 <
  24. select >
  25. 15 <
  26. option >请选择县 </option >
  27. 16 </select >
  28. 17
  29. 18 <
  30. script type="text/javascript" >
  31. 19 varproArr =["安徽","河南","河北","江苏"];
  32. 20 varcityArr =[
  33. 21 ["合肥","蚌埠","亳州","阜阳"],
  34. 22 ["郑州","开封","商丘","焦作"],
  35. 23 ["石家庄","邯郸","衡水"],
  36. 24 ["苏州","杭州","无锡","南京"]
  37. 25 ]
  38. 26 varcouArr =[
  39. 27 [
  40. 28 ["合县1","合县2","合县3","合县4"],
  41. 29 ["蚌县1","蚌县2","蚌县3","蚌县4"],
  42. 30 ["亳县1","亳县2","亳县3","亳县4"],
  43. 31 ["阜县1","阜县2","阜县3","阜县4"],
  44. 32 ],
  45. 33 [
  46. 34 ["郑县1","郑县2","郑县3","郑县4"],
  47. 35 ["开县1","开县2","开县3","开县4"],
  48. 36 ["商县1","商县2","商县3","商县4"],
  49. 37 ["焦县1","焦县2","焦县3","焦县4"],
  50. 38 ],
  51. 39 [
  52. 40 ["石县1","石县2","石县3","石县4"],
  53. 41 ["邯县1","邯县2","邯县3","邯县4"],
  54. 42 ["衡县1","衡县2","衡县3","衡县4"],
  55. 43 ],
  56. 44 [
  57. 45 ["苏县1","苏县2","苏县3","苏县4"],
  58. 46 ["杭县1","杭县2","杭县3","杭县4"],
  59. 47 ["无县1","无县2","无县3","无县4"],
  60. 48 ["南县1","南县2","南县3","南县4"],
  61. 49 ],
  62. 50 ]
  63. 51 varsltNope =document.getElementsByTagName("select");
  64. 52 varIndex1 =0;
  65. 53 createNope(proArr,0);
  66. 54 sltNope[0].onchange =function(){
  67. 55 sltNope[1].length =1;
  68. 56 sltNope[2].length =1;
  69. 57 Index =this.selectedIndex-1;
  70. 58 createNope(cityArr[Index],1);
  71. 59 }
  72. 60 sltNope[1].onchange =function(){
  73. 61 sltNope[2].length =1;
  74. 62 createNope(couArr[Index][this.selectedIndex-1],2);
  75. 63 }
  76. 64 functioncreateNope(Arr,sum){
  77. 65 for(x =0;x <
  78. Arr.length;x++) {
  79. 66 vartopy =document.createElement('option');
  80. 67 topy.innerHTML =Arr[x];
  81. 68 sltNope[sum].appendChild(topy);
  82. 69 }
  83. 70 }
  84. 71 </script >
  85. 72 </body >
  86. 73 </html >
复制代码
JQ:
  1. 1 <!DOCTYPE html >
  2. 2 <
  3. html >
  4. 3 <
  5. head >
  6. 4 <
  7. title > </title >
  8. 5 <
  9. meta charset="utf-8" >
  10. 6 <
  11. script type="text/javascript"src="jquery-3.1.1.js" > </script >
  12. 7 </head >
  13. 8 <
  14. body >
  15. 9 <
  16. select >
  17. 10 <
  18. option >---请选择省--- </option >
  19. 11 </select >
  20. 12 <
  21. select >
  22. 13 <
  23. option >---请选择市--- </option >
  24. 14 </select >
  25. 15 <
  26. select >
  27. 16 <
  28. option >请选择县 </option >
  29. 17 </select >
  30. 18
  31. 19 <
  32. script type="text/javascript" >
  33. 20 varproArr =["安徽","河南","河北","江苏"];
  34. 21 varcityArr =[
  35. 22 ["合肥","蚌埠","亳州","阜阳"],
  36. 23 ["郑州","开封","商丘","焦作"],
  37. 24 ["石家庄","邯郸","衡水"],
  38. 25 ["苏州","杭州","无锡","南京"]
  39. 26 ]
  40. 27 varcouArr =[
  41. 28 [
  42. 29 ["合县1","合县2","合县3","合县4"],
  43. 30 ["蚌县1","蚌县2","蚌县3","蚌县4"],
  44. 31 ["亳县1","亳县2","亳县3","亳县4"],
  45. 32 ["阜县1","阜县2","阜县3","阜县4"],
  46. 33 ],
  47. 34 [
  48. 35 ["郑县1","郑县2","郑县3","郑县4"],
  49. 36 ["开县1","开县2","开县3","开县4"],
  50. 37 ["商县1","商县2","商县3","商县4"],
  51. 38 ["焦县1","焦县2","焦县3","焦县4"],
  52. 39 ],
  53. 40 [
  54. 41 ["石县1","石县2","石县3","石县4"],
  55. 42 ["邯县1","邯县2","邯县3","邯县4"],
  56. 43 ["衡县1","衡县2","衡县3","衡县4"],
  57. 44 ],
  58. 45 [
  59. 46 ["苏县1","苏县2","苏县3","苏县4"],
  60. 47 ["杭县1","杭县2","杭县3","杭县4"],
  61. 48 ["无县1","无县2","无县3","无县4"],
  62. 49 ["南县1","南县2","南县3","南县4"],
  63. 50 ],
  64. 51 ]
  65. 52 createNope(proArr,0);
  66. 53 $("select")[0].onchange =function(){
  67. 54 $("select")[1].length =1;
  68. 55 $("select")[2].length =1;
  69. 56 Index =this.selectedIndex-1;
  70. 57 createNope(cityArr[Index],1);
  71. 58 }
  72. 59 $("select")[1].onchange =function(){
  73. 60 $("select")[2].length =1;
  74. 61 createNope(couArr[Index][this.selectedIndex-1],2);
  75. 62 }
  76. 63 functioncreateNope(Arr,sum){
  77. 64 $.each(Arr,function(index,value){
  78. 65 $("select").eq(sum).append(" <option >
  79. "+value+" </option >
  80. ");
  81. 66 })
  82. 67 }
  83. 68 </script >
  84. 69 </body >
  85. 70 </html >
复制代码



上一篇:一次博客园美化经历
下一篇:使用jQuery快速高效制作网页交互特效——05 第五章 05 初识 jQuery
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-10-18 10:46

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表