HTML+JS 省市二级联动

喜欢ヅ旅行 2022-12-15 09:01 344阅读 0赞

文章目录

    1. 源码
    • 2.1. `二级联动.html`
    • 2.2. `二级联动.js`

1. 按

  1. 创建二级联动.html二级联动.js,接着将本文的源码复制粘贴进去
    在这里插入图片描述
  2. 最后打开二级联动.html即可看到如下效果:
    在这里插入图片描述

2. 源码

2.1. 二级联动.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>二级联动</title>
  6. </head>
  7. <body>
  8. <script src="./二级联动.js"></script>
  9. <select id="province" onchange="choose(this.value)">
  10. <option value="0">--请选择省--</option>
  11. <option value="广东">广东</option>
  12. <option value="湖北">湖北</option>
  13. </select>
  14. <select id="city" disabled="disabled">
  15. <option value="0">--请选择市--</option>
  16. </select>
  17. </body>
  18. </html>

2.2. 二级联动.js

  1. // 创建一个二维数组
  2. var arr = new Array(2)
  3. arr[0] = ["广东","广州","深圳","佛山"]
  4. arr[1] = ["湖北","荆州","武汉","赤壁"]
  5. function choose(val){
  6. // 获取city的select
  7. var city = document.getElementById("city")
  8. // 获取option
  9. var cityOp = city.getElementsByTagName("option")
  10. // 设置可操作
  11. city.disabled = false
  12. // 先删除,后添加
  13. while (cityOp.length > 0){
  14. // 删除第一个option
  15. city.removeChild(cityOp[0])
  16. }
  17. var isProvince = false
  18. // 遍历
  19. for (var i = 0; i < arr.length; i++) {
  20. //取一维数组
  21. var arr1 = arr[i]
  22. //取一维数组的第一个值
  23. var firstVal = arr1[0]
  24. //判断
  25. if (firstVal != val) continue
  26. isProvince = true
  27. //遍历
  28. for (var j = 1; j < arr1.length; j++) {
  29. // 获取城市名
  30. let value = arr1[j]
  31. // 创建option
  32. let option = document.createElement("option")
  33. // 创建文本
  34. let text = document.createTextNode(value)
  35. // 把文本添加到标签
  36. option.appendChild(text)
  37. //添加到city里面
  38. city.appendChild(option)
  39. }
  40. }
  41. if (!isProvince){
  42. city.disabled = true
  43. let option = document.createElement("option")
  44. let text = document.createTextNode("--请选择市--")
  45. option.appendChild(text)
  46. city.appendChild(option)
  47. }
  48. }

发表评论

表情:
评论列表 (有 0 条评论,344人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Java数组实现省市二级联动

    数组的强大之处毋庸置疑,今天我要写的是用一个一维数组和一个二维数组来实现一个省市二级联动的功能。 1.首先定义一个一维数组,用来存放34个省级行政区域;定义一个二维数组,用来