div展示联动，js二级联动城市选择，非下拉框

最新推荐文章于 2024-07-03 00:07:29 发布
一只大喵喵
最新推荐文章于 2024-07-03 00:07:29 发布
阅读量1.8k
点赞数 1
本文链接：https://blog.csdn.net/Cream_Cicilian/article/details/80391630
版权
做一个医学项目的时候，仿照丁香园，有一个城市二级联动的效果。本来可以用最简单的下拉框，却自己作死，一定要漂亮的。结果花了两天把逻辑梳理了出来。还不一定是最简单的，但是我实在没有在网上找到这个效果的代码，只有笨笨的摸索。
最后效果：
这里写图片描述
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div联动</title>
    <style type="text/css">
    li{
    list-style: none;
    display: inline-block;
    margin-top: 20px;
}
.meng{
    width: 100%;
    height: 100%;
    background-color: rgba(39,40,34,0.8);
    position: fixed;
    z-index: 99;
    display: none;
}
.citySelectBackground{
    width: 600px;
    height: 400px;
    position: absolute;
    left: 50%;

    margin-left: -300px;
    margin-top: 100px;
    background-color: white;
}
.osubmit{
    width: 100px;
    height: 30px;
    background-color: rgb(51,133,255);
    border: none;
    cursor: pointer;
    margin-top: 20px;
    color: white;

}
.province{
    width: 200px;
    margin-top: 30px;
    margin-left: 30px;
/*  background-color: pink;*/
    height: 300px;
    overflow: auto;

    display: inline-block;
}
.province li{
    list-style: none;
    width: 200px;
    height: 30px;
    color: #21AECB;
    cursor: pointer;
/*  background-color: yellow;*/
    line-height: 30px;

    font-size: 17px;
    text-align: center;
    margin-top: 5px;
}
.province li:hover{
    background-color: #21AECB;
    color: white;
}
.city{
    width: 300px;
    margin-top: 30px;
    margin-left: 30px;
/*  background-color: pink;*/
    height: 300px;
    overflow: auto;
    display: inline-block;
}
.city option{

/*  width: 100%;*/
    height: 30px;
    color: #21AECB;
    cursor: pointer;
/*  background-color: yellow;*/
    line-height: 30px;
    font-size: 17px;
    margin-top: 5px;
}
.city option:hover{
    background-color: #21AECB;
    color: white;
}
.ocha{
    position: absolute;
    font-size: 20px;
    top: 5px;
    cursor: pointer;
    right: 10px;
    width: 20px;
    display: inline-block;
}   
.quer{
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    line-height: 30px;
}
.one{
    width: 80px;
}
.er{
    width: 300px;
    /*overflow: auto;*/
}
.er textarea{
    width: 400px;
    height: 100px;
    vertical-align: top;
}
.er img{
    vertical-align: top;
    width: 400px;
    height: 200px;
}
.erbtn{
    width: 200px;
    cursor: pointer;
}
.erbtn2{
    width: 80px;
    height: 32px;
    margin: 0px;
    background-color: rgb(51,133,255);
    display: inline-block;
    position: relative;
/*  top: -5px;*/
    color: white;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    left: -5px;
}
.erbtn2:hover{
    background-color: #33B0FF;

}
.erText{

    width: 200px;
    height: 30px;
}        
    </style>
</head>
<body>
    <!-- 城市选择 -->
    <div class="meng" id="mengCity">
        <div class="citySelectBackground">
            <div class="ocha" id="ocha">×</div>
            <div class="province" >
               <li class="oc"  style="background-color: #21AECB;color: white;">北京市</li>
                <li class="oc">上海市</li>
                <li class="oc">天津市</li>
                <li class="oc">重庆市</li>
                <li class="oc">河北</li>
                <li class="oc">山西</li>
                <li class="oc">内蒙古</li>
                <li class="oc">辽宁</li>
                <li class="oc">吉林</li>
                <li class="oc">黑龙江</li>
                <li class="oc">江苏</li>
                <li class="oc">浙江</li>
                <li class="oc">安徽</li>
                <li class="oc">福建</li>
                <li class="oc">江西</li>
                <li class="oc">山东</li>
                <li class="oc">河南</li>
                <li class="oc">湖北</li>
                <li class="oc">湖南</li>
                <li class="oc">广东</li>
                <li class="oc">广西</li>
                <li class="oc">海南</li>
                <li class="oc">四川</li>
                <li class="oc">贵州</li>
                <li class="oc">云南</li>
                <li class="oc">西藏</li>
                <li class="oc">陕西</li>
                <li class="oc">甘肃</li>
                <li class="oc">青海</li>
                <li class="oc">宁夏</li>
                <li class="oc">新疆</li>
                <li class="oc">台湾</li>
                <li class="oc">香港</li>
                <li class="oc">国外</li>
            </div>
            <div class="city" id="oCity"></div>
            <div class="osubmit quer" id="quer">确认</div>
        </div>
    </div> 
    <!-- 不是蒙版层 -->
    <div>
         <li class="one">城市:</li>
         <li class="er">
            <input class="erText" id="citySelect" value="请选择" disabled />
            <div id="citySelectBtn" class="erbtn2">请选择</div>                        
         </li>               
    </div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    // 省份城市的联动
 var oC=document.getElementsByClassName('oc');
 var oCity=document.getElementById('oCity');
 var city = [];//申明
　　//定义二级数据
    city[0] = ['东城区','西城区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区','密云区','延庆区'];
    city[1] = ['和平区','河东区','河西区','南开区','河北区','红桥区','东丽区','西青区','津南区','北辰区','武清区','宝坻区','滨海新区','宁河区','静海区','蓟州区'];
    city[2] = ['黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区','闵行区','宝山区','嘉定区','浦东新区','金山区','松江区','青浦区','奉贤区','崇明区'];
    city[3] = ['万州区','涪陵区','渝中区','大渡口区','江北区','沙坪坝区','九龙坡区','南岸区','北碚区','綦江区','大足区','渝北区','巴南区','黔江区','长寿区','江津区','合川区','永川区','南川区','璧山区','铜梁区','潼南区','荣昌区','开州区','梁平区','丰都县','垫江县','武隆区','忠县','云阳县','奉节县','巫山县','巫溪县','石柱土家族自治县','秀山土家族苗族自治县','酉阳土家族苗族自治县','彭水苗族土家族自治县']
    city[4] = ['石家庄市','唐山市','秦皇岛市','邯郸市','邢台市','保定市','张家口市','承德市','沧州市','廊坊市','衡水市'];
    city[5] = ['太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市'];
    city[6] = ['呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市','兴安盟','锡林郭勒盟','阿拉善盟'];
    city[7] = ['沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市'];
    city[8] = ['长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边朝鲜族自治州'];
    city[9] = ['哈尔滨市','齐齐哈尔市','鸡西市','鹤岗市','双鸭山市','大庆市','伊春市','佳木斯市','七台河市','牡丹江市','黑河市','绥化市','大兴安岭地区'];
    city[10] = ['南京市','无锡市','徐州市','常州市','苏州市','南通市','连云港市','淮安市','盐城市','扬州市','镇江市','泰州市','宿迁市'];
    city[11] = ['杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市'];
    city[12] = ['合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','六安市','亳州市','池州市','宣城市'];
    city[13] = ['福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市'];
    city[14] = ['南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市'];
    city[15] = ['济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市'];
    city[16] = ['郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','濮阳市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市','济源市'];
    city[17] = ['武汉市','黄石市','十堰市','宜昌市','襄阳市','鄂州市','荆门市','孝感市','荆州市','黄冈市','咸宁市','随州市','恩施土家族苗族自治州','仙桃市','潜江市','天门市','神农架林区'];
    city[18] = ['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市','湘西土家族苗族自治州'];
    city[19] = ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'];
    city[20] = ['南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市'];
    city[21] = ['海口市','三亚市','三沙市','儋州市','五指山市','琼海市','文昌市','万宁市','东方市','定安县','屯昌县','澄迈县','临高县','白沙黎族自治县','昌江黎族自治县','乐东黎族自治县','陵水黎族自治县','保亭黎族苗族自治县','琼中黎族苗族自治县'];
    city[22] = ['成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市','阿坝藏族羌族自治州','甘孜藏族自治州','凉山彝族自治州'];
    city[23] = ['贵阳市','六盘水市','钟山区','遵义市','安顺市','毕节市','铜仁市','黔西南布依族苗族自治州','黔东南苗族侗族自治州','黔南布依族苗族自治州'];
    city[24] = ['昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市','楚雄彝族自治州','红河哈尼族彝族自治州','文山壮族苗族自治州','西双版纳傣族自治州','大理白族自治州','德宏傣族景颇族自治州','怒江傈僳族自治州','迪庆藏族自治州'];
    city[25] = ['拉萨市','日喀则市','昌都市','林芝市','山南市','那曲市','阿里地区'];
    city[26] = ['西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市'];
    city[27] = ['嘉峪关市','金昌市','白银市','天水市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市','临夏回族自治州甘南藏族自治州'];
    city[28] = ['西宁市','海东市','海北藏族自治州','黄南藏族自治州','海南藏族自治州','果洛藏族自治州','玉树藏族自治州','海西蒙古族藏族自治州'];
    city[29] = ['银川市','石嘴山市','吴忠市','固原市','中卫市'];
    city[30] = ['乌鲁木齐市','克拉玛依市','吐鲁番市','哈密市','昌吉回族自治州','博尔塔拉蒙古自治州','巴音郭楞蒙古自治州','阿克苏地区','克孜勒苏柯尔克孜自治州','喀什地区','和田地区','伊犁哈萨克自治州','塔城地区','阿勒泰地区','石河子市','阿拉尔市','图木舒克市','五家渠市','北屯市','铁门关市','双河市','可克达拉市','昆玉市'];
    city[31] = [];
    city[32] = [];
    city[33] = [];
// 调用城市选择的函数
// 样式的改变
for(var p=0;p<oC.length;p++){
    oC[p].indexx=p;
    oC[p].onclick=function(){       
        func(this.indexx);
         this.style.backgroundColor = "#21AECB";
         this.style.color = "white";
         for(var j=0;j<oC.length;j++){
            if(j!=this.indexx){
                oC[j].style.backgroundColor = "white";
                oC[j].style.color = "#21AECB";
            }
         }
    }
}
// 把城市刷出来
 function func(m){
        oCity.innerHTML="";
        for (var i = 0; i < city[m].length; i++) {
　　　　//创建一个option 把数据存储在option 
            var op = new Option(city[m][i],i);
            op.className='cityclass';
            oCity.append(op);
        };
         getCityName();
    }
func(0);
// 把选择的城市的数据传给一个input
var citySelect=document.getElementById('citySelect');
function getCityName(){
   var cityEach=document.getElementsByClassName('cityclass');
   for(var q=0;q<cityEach.length;q++){
         // 传递数据
      cityEach[q].indexx=q;
      cityEach[q].onclick=function(){
         citySelect.value=this.innerHTML;
         // 改变样式
         this.style.backgroundColor = "#21AECB";
         this.style.color = "white";
            for(var j=0;j<cityEach.length;j++){
               if(j!=this.indexx){
                   cityEach[j].style.backgroundColor = "white";
                   cityEach[j].style.color = "#21AECB";
               }
            }
       }         
    }
}
getCityName();

// 调用城市选择的蒙版层
$("#ocha").click(function(){
    $("#mengCity").css("display","none");
})
$("#quer").click(function(){
    $("#mengCity").css("display","none");
})
$("#citySelectBtn").click(function(){
    $("#mengCity").css("display","block");
})

</script>   
</body>
</html>