JavaScript 问题解决 —— 省市区三级联动模拟下拉框

目录

1.html 结构

2.css 样式

3.js 点击事件 （重要）

---

• 最终实现效果：
• 

1.html 结构

• 整体盒子中包含：外层盒子，内层模拟下拉框

    // 整体盒子   
    <div class="city-map-select">
      // 外层盒子 
      <div class="show-cityname">
        <input type="text" readonly value="行政区划" />
        <i class="arrow"></i>
      </div>
      // 模拟下拉框
      <div class="city-list">
        <div class="title pro-gs">甘肃省</div>
        <ul class="sz-name" id="sz-name"></ul>
      </div>
    </div>

2.css 样式

• 设置整体盒子及外层模拟框：

      @font-face {
        src: url("SourceHanSansCN-Normal.ttf");
        font-family: "SourceHanSansCN-Normal";
      }
      .city-map-select {
        position: absolute;
        top: 19px;
        left: 90px;
        padding: 0 8px;
        width: 97px;
        height: 30px;
        background: url(Triangle.png) no-repeat 92% rgba(7, 113, 192, 0.75);
        border: none;
        border-radius: 4px;
        color: #fff;
        font-size: 12px;
        cursor: pointer;
        outline: none;
        /*取消默认箭头开始*/
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        /*取消默认箭头结束*/
        z-index: 1;
      }
      .city-map-select .show-cityname {
        display: inline-block;
        width: 100%;
        vertical-align: middle;
      }
      .city-map-select .show-cityname input {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-right: 16px;
        border: none;
        background: transparent;
        font-size: 12px;
        font-weight: 400;
        font-family: "SourceHanSansCN-Normal";
        outline: none;
        color: #fff;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        text-align: left;
      }

 

• 设置城市列表模拟下拉框：

     .city-list {
        display: none;
        position: absolute;
        width: 450px;
        top: 34px;
        left: 0;
        background: rgba(7, 113, 192, 0.75);
        border-radius: 4px;
        z-index: 10;
      }

      .city-list .sz-name {
        width: 100%;
        height: 320px;
        margin: 0;
        padding: 0 12px;
        font-family: "SourceHanSansCN-Normal";
        overflow: auto;
      }
      .city-list .sz-name li {
        font-family: "SourceHanSansCN-Normal";
        line-height: 30px;
        list-style: none;
      }
      .city-list .title,
      .city-list .sz-name .center {
        display: inline-block;
        width: 13%;
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        vertical-align: middle;
      }
      .city-list .title {
        margin: 12px 0 6px 12px;
      }
      .city-list .sz-name .desc {
        display: inline-block;
        width: 87%;
        margin-top: 2px;
        font-size: 12px;
        vertical-align: top;
      }
      .city-list .sz-name .desc span {
        margin: 0 2px;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
      }

 

• 设置城市列表模拟下拉框的滚动条：

      /* 滚动条整体部分 */
      ::-webkit-scrollbar {
        width: 3px;
        background-color: transparent;
      }
      /* scroll轨道背景 */
      ::-webkit-scrollbar-track {
        border-radius: 1.5px;
        background-color: transparent;
      }
      /* 滚动条中能上下移动的小块 */
      ::-webkit-scrollbar-thumb {
        border-radius: 1.5px;
        background-color: transparent;
      }

3.js 逻辑 （重要）

• 需要引入的文件：

  <script src="jquery-3.3.1.min.js"></script>
  <script src="citylist.js"></script> // 存储城市列表的数据

• citylist.js 介绍：分为省市区三个行政区编号，他们是前者包括后者的嵌套关系
• 
• 
• 
• 处理 citylist.js 总的城市列表 JSON 数据：

      // 甘肃省编号
      var gs = "620000";
      // 存储甘肃省市州列表
      var gscity = cityList[gs]; 
      // 打印甘肃省市州列表
      console.log(gscity);
      // 将 甘肃市州、乡县 存储为 二维数组 格式
      var gsmap = [];
      // 遍历获取市州列表
      for (var i in gscity) { 
        var tmp = [];
        // 遍历获取每个市州下的乡县列表
        for (var j in cityList[i]) {
          tmp.push(cityList[i][j]);
        }
        gsmap.push({
          // 市州列表
          fcity: gscity[i],
          // 乡县列表
          othercity: tmp,
        });
      }

      gsmap.push({
        fcity: "兰州新区",
        othercity: ["中川园区", "秦川园区", "秦川园区"],
      });
      // 打印甘肃省的市州及对应区县
      console.log(gsmap);
      var html = "";
      gsmap.forEach(function (el, index) {
        html +=
          '<li><span class="center">' + el.fcity + '</span><div class="desc">';
        el["othercity"].forEach(function (item) {
          html += " <span>" + item + "</span>";
        });
        html += "</div></li>";
      });
      $(".sz-name").html(html);

• 显示隐藏下拉菜单：

      $(".show-cityname").click(function () {
        if ($(this).children("i").hasClass("suc-rotate")) { // 控制选择框箭头
          $(this).siblings(".city-list").slideUp(); // 控制下方城市列表
          $(this).children("i").removeClass("suc-rotate");
        } else {
          $(this).children("i").addClass("suc-rotate");
          $(this).siblings(".city-list").slideDown();
        }
      });

• 点击甘肃省：

      $(document).on("click", ".pro-gs", function () { // 点击甘肃省选项之后
        $(this)
          .parents(".city-list")
          .siblings(".show-cityname")
          .children("input") 
          .val("甘肃省"); // 将输入框进行重新赋值
        $(this).parents(".city-list").slideUp(); // 选中后也要将城市列表滑动隐藏
        $(this)
          .parents(".city-list")
          .siblings(".show-cityname")
          .children("i")
          .removeClass("suc-rotate"); // 选中后也要将选择框箭头进行转换
      });

• 点击市州（中心城市）：

      $(document).on("click", ".sz-name li .center", function () {
        var txt = $(this).text();
        $(this)
          .parents(".city-list")
          .siblings(".show-cityname")
          .children("input")
          .val(txt); // 将输入框进行重新赋值
        $(this).parents(".city-list").slideUp(); // 选中后也要将城市列表滑动隐藏
        $(this)
          .parents(".city-list")
          .siblings(".show-cityname")
          .children("i")
          .removeClass("suc-rotate");  // 选中后也要将选择框箭头进行转换
      });

• 点击乡县：

      $(document).on("click", ".sz-name li span", function () {
        var txt = $(this).text();
        $(this)
          .parents(".city-list")
          .siblings(".show-cityname")
          .children("input")
          .val(txt);
        $(this).parents(".city-list").slideUp();
        $(this)
          .parents(".city-list")
          .siblings(".show-cityname")
          .children("i")
          .removeClass("suc-rotate");
      });