表单-省市区-选择联动效果（async，await）

最新推荐文章于 2024-07-30 10:56:44 发布

一个大萝北

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量377

点赞数 1

分类专栏：前端 # 原生JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_40797578/article/details/127913471

版权

前端同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

原生JavaScript

9 篇文章 0 订阅

订阅专栏

表单-省市区-选择联动效果

获取后台的数据渲染到列表上，此处数据回填部分可不看，主要看省市区联动和市区联动部分
change事件可以监听表单的input的value属性是否有变化
效果：当点击一个省后，市区两部分会一起切换到相应省下面的市区地址。当点击市后，区部分也会切换到相应市下面的地址

注：接口不能使用，仅供参考思路

前面部分：html+css+bootstrap —>+部分js代码（async，await）---->结果：现在有默认的值在页面显示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
      .form-select {
        width: 103px;
        display: inline-block;
      }

      .col-form-label {
        text-align: right;
      }

      .figure-img {
        width: 100px;
        height: 100px;
        cursor: pointer;
      }

      #upload {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="p-5">省市区联动</h1>
      <form class="col-6">
        <div class="row mb-3">
          <label class="col-form-label col-3">籍贯：</label>
          <div class="col-9">
            <select id="province" class="form-select col-4" name="province">
              <option value="">--省--</option>
            </select>
            <select id="city" class="form-select col-4" name="city">
              <option value="">--市--</option>
            </select>
            <select id="area" class="form-select col-4" name="area">
              <option value="">--区--</option>
            </select>
          </div>
        </div>
      </form>
    </div>
    <script src="https://unpkg.com/bootstrap@5.1.3/dist/js/bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>

    <script>
      axios.defaults.baseURL = "http://ajax-api.net/"
      function $(id) {
        return document.querySelector("#" + id)
      }

      async function getInfo() {
        const res = await axios.get("api/settings")
        const { area, avatar, city, nickname, province } = res.data.data
        //数据回填

        // 把省的数据整体填入select
        const resProvince = await axios.get("api/province")
        $("province").innerHTML += resProvince.data.data
          .map((p) => `<option value="${p}">${p}</option>`)
          .join("")
        $("province").value = province //回填数据默认填到value里
        // 把市的数据填入
        const resCity = await axios.get(`api/city?pname=${province}`)
        $("city").innerHTML += resCity.data.data
          .map((c) => `<option value="${c}">${c}</option>`)
          .join("")
        $("city").value = city
        // 把区的数据填入
        const resArea = await axios.get(
          `api/area?pname=${province}&cname=${city}`
        )
        $("area").innerHTML += resArea.data.data
          .map((a) => `<option value="${a}">${a}</option>`)
          .join("")
        $("area").value = area
      }

      getInfo()
        
        //联动部分↓↓↓
        
    </script>
  </body>
</html>

目前效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7VBECfAu-1668695517230)(C:\Users\28132\AppData\Roaming\Typora\typora-user-images\1668694331517.png)]$

实现

实现效果的js代码：

思路：点击省（省的信息改变触发change事件）–>获取省的名字—>通过省的名字获取相应的全部市—>把省下的所有市都写进(innerHTML) 市的框框中（第8行）—>把第一个当成默认的填入框框—>获取当前市的值 —>通过获取到的省值和市值查询区的信息—>把区下的所有市都写进(innerHTML) 市的框框中（第20行）—>把第一个当成默认的填入框框

（目前只能点击省，区跟着变）

所以再给市添加一个change事件，监听改变状态，变了就区一起变

这样省市区三个就能一起变

 //   1.省市区联动效果
      //   给省这个下拉框添加change事件：修改触发，否则不触发
      $("province").addEventListener("change", async function () {
        //    获取修改的省
        const province = $("province").value
        // 联动获取市
        const resCity = await axios.get("api/city?pname=" + province)
        $("city").innerHTML = resCity.data.data
          .map((c) => `<option value="${c}">${c}</option>`)
          .join("")
        // 默认选中第一个市
        $("city").value = resCity.data.data[0]
        // 获取最新的市
        const city = $("city").value

        // 联动获取区
        const resArea = await axios.get(
          `api/area?pname=${province}&cname=${city}`
        )
        $("area").innerHTML = resArea.data.data
          .map((a) => `<option value="${a}">${a}</option>`)
          .join("")
        $("area").value = resArea.data.data[0]
        //为了调试数据：
        const area = $("area").value
        console.log(province, city, area)
      })

      //   2.市区联动
      $("city").addEventListener("change", async function () {
        //  获取最新的省
        const province = $("province").value
        // 获取最新的市
        const city = $("city").value

        // 联动获取区
        const resArea = await axios.get(
          `api/area?pname=${province}&cname=${city}`
        )
        $("area").innerHTML = resArea.data.data
          .map((a) => `<option value="${a}">${a}</option>`)
          .join("")
        $("area").value = resArea.data.data[0]
        //为了调试数据：
        const area = $("area").value
        console.log(province, city, area)
      })