ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

htmlPC端省份城市二级联动

2020-03-05 16:37:07  阅读：1065  来源： 互联网

标签：style 联动 self item dragArea background htmlPC 省份 icon


主要编程思想：根据省份索引与城市索引联动，JS用的是对象编程思想
html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./index.css">
    <title>城市联动</title>
</head>

<body>
    <div class="container">
        <!-- 上面部分 -->
        <div class="citySelect">
            <p class="selectName">北京</p>
            <i class="icon"></i>
        </div>
        <!-- 下面下拉菜单部分 -->
        <div class="dragArea">
            <ul class="province">
               
            </ul>
            <ul class="city">
               
            </ul>
        </div>
    </div>
    <script src="./js/index.js"></script>
    <script>
        selectCity.init();
    </script>

</body>

</html>

index.css

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.container{
    width: 300px;
    height: 42px;
    margin: 100px  auto 0px;
}
.container .citySelect{
    width: 100%;
    height: 100%;
    border: 1px solid #00d7c6;
    position: relative;
}
.container .citySelect p{
    width: 80px;
    height: 42px;
    font-size: 13px;
    line-height: 42px;
    margin-left: 18px;
    color: #61687c;
    cursor: pointer;
}
.container .citySelect i{
    display: block;
    width: 12px;
    height: 12px;
    background: url(./img/downArrow.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 90px;
    top: 20px;
    cursor: pointer;
}
/* 下半部分 */
.container .dragArea{
    width: 100%;
    height: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background: #f6f6f8;
    display: none;
}
.container .dragArea ul:nth-child(1){
    width: 149px;
    height: 300px;
    float: left;
    overflow: scroll;
}
.container .dragArea ul:nth-child(2){
    width: 149px;
    height: 300px;
    float: right;
    overflow: scroll;
}
.container .dragArea ul li{
    background-color: #fff;
    width: 129px;
    height: 50px;
    padding-left: 20px;
    line-height: 50px;
    font-size: 13px;
    color: #9fa3b0;
    cursor: pointer;
}
/* #active{
    background: rgb(241, 243, 246);
} */
.container .dragArea ul:nth-child(2) li:hover{
    background: rgb(241, 243, 246);
}
.container .dragArea ul::-webkit-scrollbar{
    width: 4px;
    height: 0px;
}
.container .dragArea ul::-webkit-scrollbar-thumb{
    background-color: #d1d4d6;
    border-radius: 4px;
}

JS:

var selectCity = {
    dragArea: document.getElementsByClassName('dragArea')[0],
    provinceBox: document.getElementsByClassName('province')[0],
    cityBox: document.getElementsByClassName('city')[0],
    selectName: document.getElementsByClassName('selectName')[0],
    icon: document.getElementsByClassName('icon')[0],
    provinceLi: null,
    cityLi: null,
    bool: false,
    province: ["北京", "上海", "广东", "江苏", "浙江", "重庆", "安徽", "福建", "甘肃", "广西",
        "贵州", "海南", "河北", "黑龙江", "河南", "湖北", "湖南", "江西", "吉林", "辽宁", "内蒙古",
        "宁夏", "青海", "山东", "山西", "陕西", "四川", "天津", "新疆", "西藏", "云南", "香港",
        "澳门", "台湾", "海外"],
    city: [["东城", "西城", "朝阳", "丰台", "石景山", "海淀", "门头沟", "房山", "通州", "顺义", "昌平", "大兴", "平谷", "怀柔", "密云", "延庆"],
    ["崇明", "黄浦", "卢湾", "徐汇", "长宁", "静安", "普陀", "闸北", "虹口", "杨浦", "闵行", "宝山", "嘉定", "浦东", "金山", "松江", "青浦", "南汇", "奉贤"],
    ["广州", "深圳", "珠海", "东莞", "中山", "佛山", "惠州", "河源", "潮州", "江门", "揭阳", "茂名", "梅州", "清远", "汕头", "汕尾", "韶关", "顺德", "阳江", "云浮", "湛江", "肇庆"],
    ["南京", "常熟", "常州", "海门", "淮安", "江都", "江阴", "昆山", "连云港", "南通", "启东", "沭阳", "宿迁", "苏州", "太仓", "泰州", "同里", "无锡", "徐州", "盐城", "宜兴", "仪征", "张家港", "镇江", "周庄"],
    ["杭州", "安吉", "慈溪", "定海", "奉化", "海盐", "黄岩", "湖州", "嘉兴", "金华", "临安", "临海", "丽水", "宁波", "瓯海", "平湖", "千岛湖", "衢州", "江山", "瑞安", "绍兴", "嵊州", "台州", "温岭", "温州", "余姚", "舟山"],
    ["万州", "涪陵", "渝中", "大渡口", "江北", "沙坪坝", "九龙坡", "南岸", "北碚", "万盛", "双桥", "渝北", "巴南", "黔江", "长寿", "綦江", "潼南", "铜梁", "大足", "荣昌", "璧山", "梁平", "城口", "丰都", "垫江", "武隆", "忠县", "开县", "云阳", "奉节", "巫山", "巫溪", "石柱", "秀山", "酉阳", "彭水", "江津", "合川", "永川", "南川"],
    ["合肥", "安庆", "蚌埠", "亳州", "巢湖", "滁州", "阜阳", "贵池", "淮北", "淮南", "黄山", "九华山", "六安", "马鞍山", "宿州", "铜陵", "屯溪", "芜湖", "宣城"],
    ["福州", "厦门", "泉州", "漳州", "龙岩", "南平", "宁德", "莆田", "三明"],
    ["兰州", "白银", "定西", "敦煌", "甘南", "金昌", "酒泉", "临夏", "平凉", "天水", "武都", "武威", "西峰", "张掖"],
    ["南宁", "百色", "北海", "桂林", "防城港", "贵港", "河池", "贺州", "柳州", "钦州", "梧州", "玉林"],
    ["贵阳", "安顺", "毕节", "都匀", "凯里", "六盘水", "铜仁", "兴义", "玉屏", "遵义"],
    ["海口", "儋县", "陵水", "琼海", "三亚", "通什", "万宁"],
    ["石家庄", "保定", "北戴河", "沧州", "承德", "丰润", "邯郸", "衡水", "廊坊", "南戴河", "秦皇岛", "唐山", "新城", "邢台", "张家口"],
    ["哈尔滨", "北安", "大庆", "大兴安岭", "鹤岗", "黑河", "佳木斯", "鸡西", "牡丹江", "齐齐哈尔", "七台河", "双鸭山", "绥化", "伊春"],
    ["郑州", "安阳", "鹤壁", "潢川", "焦作", "济源", "开封", "漯河", "洛阳", "南阳", "平顶山", "濮阳", "三门峡", "商丘", "新乡", "信阳", "许昌", "周口", "驻马店"],
    ["武汉", "恩施", "鄂州", "黄冈", "黄石", "荆门", "荆州", "潜江", "十堰", "随州", "武穴", "仙桃", "咸宁", "襄阳", "襄樊", "孝感", "宜昌"],
    ["长沙", "常德", "郴州", "衡阳", "怀化", "吉首", "娄底", "邵阳", "湘潭", "益阳", "岳阳", "永州", "张家界", "株洲"],
    ["南昌", "抚州", "赣州", "吉安", "景德镇", "井冈山", "九江", "庐山", "萍乡", "上饶", "新余", "宜春", "鹰潭"],
    ["长春", "吉林", "白城", "白山", "珲春", "辽源", "梅河", "四平", "松原", "通化", "延吉"],
    ["沈阳", "鞍山", "本溪", "朝阳", "大连", "丹东", "抚顺", "阜新", "葫芦岛", "锦州", "辽阳", "盘锦", "铁岭", "营口"],
    ["呼和浩特", "阿拉善盟", "包头", "赤峰", "东胜", "海拉尔", "集宁", "临河", "通辽", "乌海", "乌兰浩特", "锡林浩特"],
    ["银川", "固源", "石嘴山", "吴忠"],
    ["西宁", "德令哈", "格尔木", "共和", "海东", "海晏", "玛沁", "同仁", "玉树"],
    ["济南", "滨州", "兖州", "德州", "东营", "菏泽", "济宁", "莱芜", "聊城", "临沂", "蓬莱", "青岛", "曲阜", "日照", "泰安", "潍坊", "威海", "烟台", "枣庄", "淄博"],
    ["太原", "长治", "大同", "侯马", "晋城", "离石", "临汾", "宁武", "朔州", "沂州", "阳泉", "榆次", "运城"],
    ["西安", "安康", "宝鸡", "汉中", "渭南", "商州", "绥德", "铜川", "咸阳", "延安", "榆林"],
    ["成都", "巴中", "达川", "德阳", "都江堰", "峨眉山", "涪陵", "广安", "广元", "九寨沟", "康定", "乐山", "泸州", "马尔康", "绵阳", "眉山", "南充", "内江", "攀枝花", "遂宁", "汶川", "西昌", "雅安", "宜宾", "自贡", "资阳"],
    ["天津", "和平", "东丽", "河东", "西青", "河西", "津南", "南开", "北辰", "河北", "武清", "红桥", "塘沽", "汉沽", "大港", "宁河", "静海", "宝坻", "蓟县"],
    ["乌鲁木齐", "阿克苏", "阿勒泰", "阿图什", "博乐", "昌吉", "东山", "哈密", "和田", "喀什", "克拉玛依", "库车", "库尔勒", "奎屯", "石河子", "塔城", "吐鲁番", "伊宁"],
    ["拉萨", "阿里", "昌都", "林芝", "那曲", "日喀则", "山南"],
    ["昆明", "大理", "保山", "楚雄", "东川", "个旧", "景洪", "开远", "临沧", "丽江", "六库", "潞西", "曲靖", "思茅", "文山", "西双版纳", "玉溪", "中甸", "昭通"],
    ["香港", "九龙", "新界"],
    ["澳门"],
    ["台北", "基隆", "台南", "台中", "高雄", "屏东", "南投", "云林", "新竹", "彰化", "苗栗", "嘉义", "花莲", "桃园", "宜兰", "台东", "金门", "马祖", "澎湖"],
    ["俄罗斯", "美国", "日本", "英国", "法国", "德国", "澳大利亚", "东南亚", "阿拉伯半岛", "非洲", "南美洲"]],
    init: function () {
        this.showProvince();//初始化省份
        this.showCity();//初始化城市
        this.clickSelectName();//点击选择
    },
    //初始化省份
    showProvince() {
        let provinceTemplate = '';
        this.province.forEach((item, index) => {
            let liTemplate = `<li data-index='${index}' class='liProvince'>${item}</li>`;
            provinceTemplate += liTemplate;
        })
        this.provinceBox.innerHTML = provinceTemplate;
        this.provinceLi = Array.prototype.slice.call(this.provinceBox.getElementsByTagName('li'))
        this.provinceLi.forEach((item, index) => {
            item.addEventListener('mouseenter', this.overFn.bind(this))
        })

    },
    //鼠标进入省份的函数
    overFn: function (e) {
        let cityId = e.target.dataset.index;//获取当前的省份索引
        this.provinceLi[cityId].style.background = `rgb(241, 243, 246)`;//当前的省份背景颜色
        let allSiblings  =this.siblings( this.provinceLi[cityId]);//当前身份的兄弟元素
        allSiblings.forEach((item,index)=>{
            item.style.background = '#fff';//当前身份的兄弟元素的背景颜色为白色
        })
        let cityTemplate = '';//城市模板
        this.city[cityId].forEach((item, index) => {
            let liTemplate = `<li data-city='${item}' class='liProvince'>${item}</li>`;
            cityTemplate += liTemplate;
        })
        this.cityBox.innerHTML = cityTemplate;//渲染城市模板
        this.cityLi = Array.prototype.slice.call(this.cityBox.getElementsByTagName('li'));//城市类数组转为数组
        this.cityLi.forEach((item, index) => {//遍历所有城市
            item.addEventListener('click', this.clickCity.bind(this));//城市点击事件
        })
    },
    //初始化城市,默认市显示北京市的地区
    showCity() {
        let cityTemplate = '';
        this.city[0].forEach((item, index) => {
            let liTemplate = `<li data-city='${item}' class='liProvince'>${item}</li>`;
            cityTemplate += liTemplate;
        })
        this.cityBox.innerHTML = cityTemplate;
    },
    //点击选择
    clickSelectName: function () {
        let self = this;
        this.selectName.addEventListener('click', function () {//点击上部分的城市，城市选择框出来，icon图标发生变化
            if (!self.bool) {
                self.dragArea.style.display = 'block';
                self.icon.style.background = `url(./img/upArrow.png)`;
                self.icon.style.backgroundSize = `100%`;
                self.icon.style.backgroundRepeat = `no-repeat`;
                self.bool = true;
            } else {
                self.dragArea.style.display = 'none';
                self.icon.style.background = `url(./img/downArrow.png)`;
                self.icon.style.backgroundSize = `100%`;
                self.icon.style.backgroundRepeat = `no-repeat`;
                self.bool = false
            }
        })
    },
    //点击选择城市
    clickCity: function (e) {
        this.selectName.innerHTML = e.target.dataset.city;//点击城市，把当前点击的城市赋值给上部分的城市
        this.dragArea.style.display = 'none';
        this.icon.style.background = `url(./img/downArrow.png)`;
        this.icon.style.backgroundSize = `100%`;
        this.icon.style.backgroundRepeat = `no-repeat`;
        console.log(this.bool)
    },
    //获取所有兄弟元素
    siblings: function (ele) {
        var a = [];    //保存所有兄弟节点
        var p = ele.parentNode.children; //获取父级的所有子节点
        for (var i = 0; i < p.length; i++) {  //循环
            if (p[i].nodeType == 1 && p[i] != ele) {  //如果该节点是元素节点与不是这个节点本身
                a.push(p[i]);      // 添加到兄弟节点里
            }
        }

        return a;

    }
}

效果：
点击前：
在这里插入图片描述
点击后：
在这里插入图片描述
选择：
在这里插入图片描述
选择点击：
在这里插入图片描述

标签：style,联动,self,item,dragArea,background,htmlPC,省份,icon
来源： https://blog.csdn.net/Hhjian524/article/details/104677564

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有