目录
- 最终实现效果:
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"); });
JavaScript 问题解决 —— 省市区三级联动模拟下拉框
最新推荐文章于 2024-07-12 21:47:12 发布
本文档详细介绍了如何使用HTML、CSS和JavaScript实现一个自定义的城市选择框。HTML结构包括整体盒子、外层盒子和模拟下拉框;CSS样式用于美化选择框和下拉列表;JavaScript逻辑用于处理城市列表的展示和点击事件,同时提供了处理嵌套城市数据的方法。点击事件分别处理省、市、县的选择,并更新输入框的值。
摘要由CSDN通过智能技术生成