HTML代码
<form>
<div class="area">
<label>
<select name="province" id="province"></select>
</label>
<label>
<select name="town" id="town"></select>
</label>
</div>
<ul id="town-list">
</ul>
<div class="campus" id="campus">
</div>
</form>
CSS 代码
ul,li{
list-style: none;
}
form{
width: 610px;
margin: 70px auto 40px auto;
}
form .area{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 70px;
margin-bottom: 45px;
}
form .area label{
display: block;
width: 270px;
height: 50px;
line-height: 50px;
border: 1px solid #AAAAAA;
position: relative;
}
form .area label select{
width: 100%;
height: 50px;
font-size: 32px;
color: #565656;
border: none;
background: none;
padding-left: 60px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
z-index: 9;
}
form ul{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
form ul li{
padding: 5px 10px;
font-size: 26px;
color: #565656;
margin-left: 15px;
}
form ul li.act{
color: #ffffff;
background: #35629B;
}
form .campus{
width: 610px;
padding: 20px 0;
margin: 30px auto 30px;
background: #35629B;
position: relative;
border-radius: 10px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
form .campus>p{
width: 280px;
margin-bottom: 10px;
font-size: 32px;
color: #ffffff;
margin-left: 15px;
text-align: center;
}
form .campus::before{
display: block;
content: '';
width: 0;
height: 0;
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #35629B;
position: absolute;
top: -50px;
left: 0;
right: 0;
margin: 0 auto;
}
JS代码
var provinceList = [
{city:'北京市',
areaList:[
{area:'房山区', campus:['北京房山校区']},
{area:'丰台区', campus:['北京七里庄校区']},
{area:'昌平区', campus:['北京回龙观校区','北京天通苑校区']},
{area:'通州区', campus:['北京通州校区']},
{area:'海淀区', campus:['北京苏州街校区']}
]},
{city:'保定市',
areaList:[
{area:'莲池区', campus:['保定北市校区']},
{area:'高开区', campus:['保定高开校区']}
]},
{city:'沧州市',
areaList:[
{area:'运河区', campus:['沧州校区']}
]},
{city:'承德市',
areaList:[
{area:'双桥区', campus:['承德中心广场校区']}
]},
{city:'邯郸市',
areaList:[
{area:'丛台区', campus:['邯郸校区']}
]},
{city:'衡水市',
areaList:[
{area:'桃城区', campus:['衡水校区']}
]},
{city:'秦皇岛市',
areaList:[
{area:'海港区', campus:['秦皇岛新天地校区']}
]},
{city:'石家庄市',
areaList:[
{area:'长安区', campus:['石家庄先天下校区']},
{area:'桥西区', campus:['石家庄桥西校区']}
]},
{city:'唐山市',
areaList:[
{area:'路北区', campus:['唐山远洋城校区','唐山新街校区']}
]},
{city:'邢台市',
areaList:[
{area:'桥东区', campus:['邢台桥东校区']},
{area:'桥西区', campus:['邢台桥西校区']}
]},
{city:'安阳市',
areaList:[
{area:'北关区', campus:['安阳校区']}
]},
{city:'焦作市',
areaList:[
{area:'解放区', campus:['焦作校区']}
]},
{city:'洛阳市',
areaList:[
{area:'涧西区', campus:['洛阳南昌路校区']},
{area:'西工区', campus:['洛阳中州校区']}
]},
{city:'漯河市',
areaList:[
{area:'源汇区', campus:['漯河校区']}
]},
{city:'平顶山市',
areaList:[
{area:'新华区', campus:['平顶山校区']}
]},
{city:'新乡市',
areaList:[
{area:'卫滨区', campus:['新乡人民路校区']},
{area:'红旗区', campus:['新乡东站校区']},
{area:'牧野区', campus:['新乡万达校区']}
]},
{city:'信阳市',
areaList:[
{area:'浉河区', campus:['信阳校区']}
]},
{city:'许昌市',
areaList:[
{area:'魏都区', campus:['许昌大商校区','许昌许都广场校区']}
]},
{city:'郑州市',
areaList:[
{area:'二七区', campus:['郑州航海校区']},
{area:'金水区', campus:['郑州金水校区','郑州东风校区']},
{area:'中原区', campus:['郑州锦艺城校区']},
{area:'管城回族区', campus:['郑州紫荆山校区']},
{area:'郑东新区', campus:['郑州东站校区','郑州商都路校区']},
{area:'高新区', campus:['郑州高新校区']}
]},
{city:'周口市',
areaList:[
{area:'川汇区', campus:['周口校区']}
]},
{city:'济宁市',
areaList:[
{area:'任城区', campus:['济宁校区']}
]},
{city:'太原市',
areaList:[
{area:'迎泽区', campus:['太原迎泽校区']},
{area:'小店区', campus:['太原小店校区']}
]},
{city:'天津市',
areaList:[
{area:'河东区', campus:['天津河东校区']},
{area:'河西区', campus:['天津河西校区']}
]},
{city:'锦州市',
areaList:[
{area:'太和区', campus:['锦州校区']}
]},
];
var province = document.getElementById("province");
var town = document.getElementById("town");
var townList = document.getElementById("town-list");
var school= document.getElementById("campus");
var li =document.getElementById("town-list").getElementsByTagName('li');
var areaList = ''; //市级下的所有区
var area = ''; //某个市级下的所有区
var allCampus = ''; //市级下的所有校区
var campus = ''; //某个区级下所有校区
/*添加某个元素*/
function addEle(Pele,val,Cele) {
var option = document.createElement(Cele);
option.value = val;
option.innerHTML = val;
Pele.append(option);
}
/*删除某个元素*/
function removeEle(Pele,Cele) {
$(Pele).find(Cele).remove();
}
/*遍历校区,给校区赋值*/
function forCampus() {
for (var c=0; c<allCampus.length; c++){
campus = allCampus[c];
//给 #campus 赋值
addEle(school,campus,"p");
}
}
//获得市级下拉框对象
for (var p = 0; p<provinceList.length; p++){
//创建option，给 #province 里的option赋值
addEle(province,provinceList[p].city,"option");
//设置默认为北京市
if(provinceList[p].city == "北京市"){
//每次点击市级后,区级初始化,避免高级重复追加
town.innerHTML = "<option value=''>请选择</option>";
//所有区
areaList = provinceList[p].areaList;
// 遍历区级，获取区级数据
for (var a=0; a<areaList.length; a++){
area = areaList[a].area;
//创建option，给 区级 #town 里的option赋值
addEle(town,area,"option");
addEle(townList,area,"li");
//获取市级下的所有校区
allCampus = areaList[a].campus;
forCampus()
}
}
}
//获得区级下拉框对象
province.onchange = function () {
//当前select值
var selectProv = this.value;
//每次点击市级后,区级初始化,避免高级重复追加
town.innerHTML = "<option value=''>请选择</option>";
//清空 #campus 的数据
removeEle(school,"p");
removeEle(townList,"li");
//遍历市级
for (var p = 0; p<provinceList.length; p++){
//如果当前select值 等于 遍历出来市级的某一个值，就获取该市级下的所有区
if(selectProv == provinceList[p].city){
//某市级下的所有区
areaList = provinceList[p].areaList;
// 遍历某市级下的所有区，获取区级，把区放到 #town 和 town-list中
for (var a=0;a<areaList.length;a++){
area = areaList[a].area;
//创建option，给 区级 #town 里的option赋值
addEle(town,area,"option");
addEle(townList,area,"li");
//获取市级下的所有校区
allCampus = areaList[a].campus;
forCampus()
}
}
}
};
town.onchange = function () {
//当前值
var selectTown = this.value;
//清空 #campus 的数据
removeEle(school,"p");
// 遍历区级
for (var a=0; a<areaList.length; a++){
//如果当前select值 等于 遍历出来区级的某一个值，就获取该区级下的所有校区
if(selectTown == areaList[a].area){
//某区级下的所有校区
allCampus = areaList[a].campus;
forCampus()
}
}
// 下拉框选中某个区域时，对应 li 添加 act
for(var l=0; l<li.length; l++){
if (li[l].innerHTML == selectTown){
li[l].classList.add('act');
}else {
li[l].classList.remove('act');
}
}
};
$("#town-list").on("click","li",function () {
$(this).addClass("act").siblings().removeClass("act");
//清空 #campus 的数据
removeEle(school,"p");
// 遍历区级
for (var a=0; a<areaList.length; a++){
//如果当前select值 等于 遍历出来区级的某一个值，就获取该区级下的所有校区
if($(this).text() == areaList[a].area){
//区级下拉框值 等于 选中的li的值
town.value = $(this).text();
//某区级下的所有校区
allCampus = areaList[a].campus;
forCampus()
}
}
})
打开页面默认状态效果
当选择市级下拉框时，校区部分是显示市级下的所有校区，选择区级下拉框时校区部分才会显示区级下的校区，如下图效果
选择下拉效果
当下拉框选择区时，li 对应的区会添加背景色；当点击 li 时，下拉框会自动选择与 li 相同的区
2611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
