JS 城市选择实现——按级选中省市县/区

最新推荐文章于 2024-09-20 20:17:55 发布
最新推荐文章于 2024-09-20 20:17:55 发布
阅读量2.5w 收藏 21
点赞数 7
分类专栏： 模块
原文链接：https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new
版权

来自网络：

https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new

效果图

实现

项目结构

city.js

https://blog.csdn.net/qq_26416195/article/details/81114888

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地址选择</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div>
    <fieldset>
        <form action="#">
            <label for="addr-show">您选择的是：
                <input type="text" value="" id="addr-show">
            </label>
            <br/>

            <!--省份选择-->
            <select id="prov" onchange="showCity(this)">
                <option>=请选择省份=</option>

            </select>

            <!--城市选择-->
            <select id="city" onchange="showCountry(this)">
                <option>=请选择城市=</option>
            </select>

            <!--县区选择-->
            <select id="country" onchange="selecCountry(this)">
                <option>=请选择县区=</option>
            </select>
            <button type="button" class="btn met1" onClick="showAddr()" id="button-show" >确定</button>
        </form>
    </fieldset>
</div>

<script src="city.js"></script>
<script src="method.js"></script>

</body>
</html>

method.js 

//****************针对第二种方式的具体js实现部分******************//
//****************所使用的数据是city.js******************//

/*根据id获取对象*/
function $(str) {
    return document.getElementById(str);
}

var addrShow02 = $('addr-show02');  //最终地址显示框
var titleWrap = $('title-wrap').getElementsByTagName('LI');
var addrWrap = $('addr-wrap');   //省市区显示模块
var btn2 = document.getElementsByClassName('met2')[0];  //确定按钮

var current2 = {
    prov: '',
    city: '',
    country: '',
    provVal: '',
    cityVal: '',
    countryVal: ''
};

/*自动加载省份列表*/
window.onload = showProv2();

function showProv2() {
    addrWrap.innerHTML = '';
    /*addrShow02.value = '';*/
    btn2.disabled = true;
    titleWrap[0].className = 'titleSel';
    var len = provice.length;
    for (var i = 0; i < len; i++) {
        var provLi = document.createElement('li');
        provLi.innerText = provice[i]['name'];
        provLi.index = i;
        addrWrap.appendChild(provLi);
    }
}

/*************************需要给动态生成的li绑定点击事件********************** */
addrWrap.onclick = function (e) {
    var n;
    var e = e || window.event;
    var target = e.target || e.srcElement;
    if (target && target.nodeName == 'LI') {
        /*先判断当前显示区域显示的是省市区的那部分*/
        for (var z = 0; z < 3; z++) {
            if (titleWrap[z].className == 'titleSel')
                n = z;
        }
        /*显示的处理函数*/
        switch (n) {
            case 0:
                showCity2(target.index);
                break;
            case 1:
                showCountry2(target.index);
                break;
            case 2:
                selectCountry(target.index);
                break;
            default:
                showProv2();
        }
    }
};

/*选择省份之后显示该省下所有城市*/
function showCity2(index) {
    addrWrap.innerHTML = '';
    current2.prov = index;
    current2.provVal = provice[index].name;
    titleWrap[0].className = '';
    titleWrap[1].className = 'titleSel';
    var cityLen = provice[index].city.length;
    for (var j = 0; j < cityLen; j++) {
        var cityLi = document.createElement('li');
        cityLi.innerText = provice[index].city[j].name;
        cityLi.index = j;
        addrWrap.appendChild(cityLi);
    }
}

/*选择城市之后显示该城市下所有县区*/
function showCountry2(index) {
    addrWrap.innerHTML = '';
    current2.city = index;
    current2.cityVal = provice[current2.prov].city[index].name;
    titleWrap[1].className = '';
    titleWrap[2].className = 'titleSel';
    var countryLen = provice[current2.prov].city[index].districtAndCounty.length;
    if (countryLen == 0) {
        addrShow02.value = current2.provVal + '-' + current2.cityVal;
    }
    for (var k = 0; k < countryLen; k++) {
        var cityLi = document.createElement('li');
        cityLi.innerText = provice[current2.prov].city[index].districtAndCounty[k];
        cityLi.index = k;
        addrWrap.appendChild(cityLi);
    }
}

/*选中具体的县区*/
function selectCountry(index) {
    btn2.disabled = false;
    current2.country = index;
    addrWrap.getElementsByTagName('li')[index].style.backgroundColor = '#23B7E5';
    current2.countryVal = provice[current2.prov].city[current2.city].districtAndCounty[index];
}

/*点击确定后恢复成初始状态，且将所选地点显示在输入框中*/
btn2.onclick = function () {
    addrShow02.value = current2.provVal + ' ' + current2.cityVal + ' ' + current2.countryVal;
    addrWrap.getElementsByTagName('li')[current2.country].style.backgroundColor = '';
};

/*分别点击省市区标题的处理函数*/
document.getElementById('title-wrap').onclick = function (e) {
    var e = e || window.event;
    var target = e.target || e.srcElement;
    if (target && target.nodeName == 'LI') {
        for (var z = 0; z < 3; z++) {
            titleWrap[z].className = '';
        }
        target.className = 'titleSel';
        if (target.value == '0') {
            showProv2();
        } else if (target.value == '1') {
            showCity2(current2.prov);
        } else {
            showCountry2(current2.city);
        }
    }
};

style.css

/*全局样式*/
* {
    margin: 0;
    padding: 0;
}

fieldset {
    width: 500px;
    padding: 20px;
    margin: 30px;
    border: 1px solid #ccc;
}

legend{
    font-size: 18px;
    font-weight: bold;
}

#addr-show, #addr-show02,#addr-show03{
    width: 200px;
    height: 25px;
    margin-bottom: 10px;
}

.btn {
    width: 80px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    background-color: #aaa;
    margin: 0 20px;
}

.btn:disabled{
    background-color:#ccc;
}

#addr-choice{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    margin-bottom: 20px;
}

#title-wrap li,#addr-wrap li{
    list-style: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

#title-wrap li{
    width:163px;
    height: 45px;
    line-height: 45px;
    margin-bottom: 10px;
}

.titleSel{
    border-bottom: 2px solid #23B7E5;
}

#addr-wrap li{
    width: 83px;
    height: 30px;
    border-radius: 4px;
    line-height: 30px;
    font-size: 14px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
#addr-wrap li:hover{
    background-color: #23B7E5;
}

 

纯JS---省份城市级联选择,
09-19
纯JS---省份城市级联选择,
jQuery input文本框城市下拉菜单选择代码
11-10
jQuery input文本框城市下拉菜单选择代码
省市区三级联动城市数据JS文件
最新发布
gitblog_06579的博客
09-20 272
省市区三级联动城市数据JS文件 省市区三级联动城市数据js文件复制后放入citys.js文件中可自定义文件名 项目地址: https://gitcode.com/Resource-Bundle-Collection/3d6d3 ...
JS实现城市选择（详细讲解，步骤清晰）
WYF857446152的博客
05-23 4715
js实现城市选择功能
jQuery下拉选择城市插件
ICode联盟
04-01 428
下载地址 类似淘宝手机端的点击input出现下拉选项，jQuery实现的省份和城市筛选插件，不是两级联动的省市选择，这种效果更好，不管是用在PC端还是手机网站，这款jQuery省市选择下拉筛选插件是不错的选择。 dd: ...
原生JS实现城市选择（输入提示）组控件
m0_50007683的博客
09-02 545
【代码】原生JS实现城市选择（输入提示）组控件。
js实现选择城市
07-16
js实现出发地城市，和目的地城市选择，类似于携程网。并且有拼音首字母分类选择。
城市选择工具js
12-11
城市选择的js控件，有省，市区，镇县，三个选区选择。
js城市选择器
04-04
1、自动定位所在城市 2、热门城市列表展示 3、所有城市列表的展示
全国城市选择（JavaScript实现）
02-13
用JavaScript实现的三级全国城市选择，内附代码，可直接运行查看
JS实战 · 级联菜单选择省份和城市（两种）
weixin_34378922的博客
12-10 554
DOM编程步骤、思路 1、定义界面：      通过html标签将数据进行封装； 2、定义一些静态样式：      利用css； 3、需要动态地完成的和用户的交互：      a:明确事件源；      b:明确事件，将事件注册到事件源上；      c:通过JS的函数对象对事件进行封装；      d:在处理过程中需要明确处理区域。   代码一如下： &lt;html xmlns="http:/...
js,城市选择插件
11-21
js,城市选择插件js,城市选择插件js,城市选择插件js,城市选择插件js,城市选择插件
城市选择JS控件，集合
11-08
1.城市选择（单选+多选按钮类别）2.模仿去哪儿的简单组件，可参考。3.省份、城市、区县三级联动（下拉）4.城市选择（支持拼音）5.以上全部打包总有一个适合你。
原生 js 城市选择插件
03-22
原生 JS 城市选择插件，支持简拼、全拼或文字输入搜索，支持鼠标、键盘选择。很久之前使用到的一个js 插件，放在这里供免费分享。 使用方法：var test=new Vcity.CitySelector({input:'citySelect'});
Vue3.0中Element-Plus级联选择器——直接输出所选中的最后一级的数据
08-08 2923
<el-cascader placeholder="试试搜索：北京" :options="options" :props="{ multiple: true }" filterable @change="checkedData" collapse-tags ref="cascadeAddr"><.
教你一天玩转JavaScript(八)——使用JavaScript完成省市联动的效果
05-05
在本教程中，我们将深入探讨如何使用JavaScript来实现省市联动的效果。这种效果常见于许多网站的地址选择器中，当你选择一个省份时，相应的城市列表会自动更新。这个功能能够提高用户体验，使得用户在填写信息时更加...
一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果
05-11
在本教程中，我们将深入探讨如何使用jQuery库来实现一种常见的网页交互功能——省市二级联动效果。这种效果常用于地址选择，用户在选择省份时，下拉框中的城市选项会根据所选省份动态更新。这既提高了用户体验，也...
实现省市区三级联动的城市选择特效
三级联动城市选择通常指的是在一个界面中，通过选择省份来更新城市列表，选择城市后更新区域列表，最终确定具体的地址信息。这种联动方式在很多网站中用于地址选择，比如在注册信息填写、物流地址选择等场景中非常...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值