用js实现省市区三级联动

最新推荐文章于 2024-06-16 14:06:27 发布
最新推荐文章于 2024-06-16 14:06:27 发布
阅读量8.6k 收藏 27
点赞数 14
分类专栏： web前端技术 文章标签： 前端 html css3 javascript
原文链接：https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new
版权

前言

本来想搞一个简单的省市区三级联动，然后在网上找资料发现了一个大佬写的好几种方式，好喜欢，很细致，很想分享给大家。我选取了其中的一种方式单拿了出来，分享给大家，可以看看效果，也可以直接点击原文链接。经大佬同意转载啦，链接放在最后了哦。

另外，走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流呀，一起努力一起成长！

笔芯

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市区三级联动</title>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <fieldset>
            <legend>下拉选择框实现省市区三级联动</legend>
            <form action="#">
                <label for="addr-show">您选择的是：
                    <input type="text" value="" id="addr-show">
                </label>
                <br />
                <!--省份选择-->
                <select id="prov" onchange="showCity(this)">
                    <option value="">=请选择省份=</option>
                </select>
                <!--城市选择-->
                <select id="city" onchange="showCountry(this)">
                    <option value="">=请选择城市=</option>
                </select>
                <!--县区选择-->
                <select id="country" onchange="selecCountry(this)">
                    <option value="">=请选择县区=</option>
                </select>
                <button type="button" class="btn met1" onClick="showAddr()">确定</button>
            </form>
        </fieldset>
    </div>
    <script src="city.js"></script>
    <script src="add.js"></script>
</body>
</html>

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,#addr-show-number{

    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;

}



select {

    width: 120px;

    height: 30px;

}

add.js

//****************所使用的数据是city.js******************//

var btn = document.getElementsByClassName('met1')[0];

var addrShow = document.getElementById('addr-show');

var prov = document.getElementById('prov');

var city = document.getElementById('city');

var country = document.getElementById('country');



/*用于保存当前所选的省市区*/

var current = {

    prov: '',

    city: '',

    country: ''

};



/*自动加载省份列表*/

(function showProv() {

    btn.disabled = true;

    var len = provice.length;

    for (var i = 0; i < len; i++) {

        var provOpt = document.createElement('option');

        provOpt.value = provOpt.innerText = provice[i]['name'];

        prov.appendChild(provOpt);

    }

})();



/*根据所选的省份来显示城市列表*/

function showCity(obj) {

    var val = obj.options[obj.selectedIndex].value;

    if (val != current.prov) {

        current.prov = val;

        addrShow.value = '';

        btn.disabled = true;

        city.length = 1;

        country.length = 1;

    }



    if (val != '') {

        //查找省的索引

        var len = provice.length;

        let provIndex = 0;

        for (var i = 0; i < len; i++) {

            if (val == provice[i]['name']) {

                provIndex = i;

            }

        }



        var cityLen = provice[provIndex]["city"].length;

        for (var j = 0; j < cityLen; j++) {

            var cityOpt = document.createElement('option');

            cityOpt.value = cityOpt.innerText = provice[provIndex]["city"][j].name;

            city.appendChild(cityOpt);

        }

    }

}



/*根据所选的城市来显示县区列表*/

function showCountry(obj) {

    var val = obj.options[obj.selectedIndex].value;

    if (val != current.city) {

        current.city = val;

        addrShow.value = '';

        btn.disabled = true;

        country.length = 1; //清空之前的内容只留第一个默认选项

    }



    //查找省的索引

    var provLen = provice.length;

    let provIndex = 0;

    for (var i = 0; i < provLen; i++) {

        if (current.prov == provice[i]['name']) {

            provIndex = i;

            break;

        }

    }



    //查找城市的索引

    var cityLen = provice[provIndex]["city"].length;

    let cityIndex = 0;

    for (var i = 0; i < cityLen; i++) {

        if (current.city == provice[provIndex]["city"][i].name) {

            cityIndex = i;

            break;

        }

    }



    if (val != '') {

        var countryLen = provice[provIndex]["city"][cityIndex].districtAndCounty.length;

        if (countryLen == 0) {

            addrShow.value = current.prov + '-' + current.city;

            return;

        }

        for (var n = 0; n < countryLen; n++) {

            var countryOpt = document.createElement('option');

            countryOpt.innerText = provice[provIndex]["city"][cityIndex].districtAndCounty[n];

            countryOpt.value = provice[provIndex]["city"][cityIndex].districtAndCounty[n];

            country.appendChild(countryOpt);

        }

    }

}



/*选择县区之后的处理函数*/

function selecCountry(obj) {

    current.country = obj.options[obj.selectedIndex].value;

    if ((current.city != '') && (current.country != '')) {

        btn.disabled = false;

    }

}



/*点击确定按钮显示用户所选的地址*/

function showAddr() {

    addrShow.value = current.prov + '-' + current.city + '-' + current.country;

}

/*用于保存当前所选的省市区名字*/

let current04 = {

    prov_number: '',

    city_number: '',

    country_number: ''

};





/*自动加载省份列表*/

(function showProv04() {

    btn_number.disabled = true;

    for (let key in cityList) {

        let provOpt = document.createElement('option');

        provOpt.innerText = provOpt.value = key;

        prov_number.appendChild(provOpt);

    }

})();



/*根据所选的省份来显示城市列表*/

function showCity04(obj) {

    let val = obj.options[obj.selectedIndex].value;

    if (val != current04.prov_number) {

        current04.prov_number = val;

        addr_show_number.innerHTML = addr_show_number.value = '';

        btn_number.disabled = true;

        city_number.length = 1;

        country_number.length = 1;

    }



    if (val != '') {

        for (let key in cityList[current04.prov_number]['city']) {

            let cityOpt = document.createElement('option');

            cityOpt.innerText = cityOpt.value = key;

            city_number.appendChild(cityOpt);

        }

    }

}



/*根据所选的城市来显示县区列表*/

function showCountry04(obj) {

    let val = obj.options[obj.selectedIndex].value;

    if (val != current04.city_number) {

        current04.city_number = val;

        addr_show_number.innerHTML = addr_show_number.value = '';

        country_number.length = 1; //清空之前的内容只留第一个默认选项

        btn_number.disabled = true;

    }

    if (val != '') {

        for (const key in cityList[current04.prov_number]['city'][current04.city_number]['country']) {

            const countryOpt = document.createElement('option');

            countryOpt.innerText = countryOpt.value = key

            country_number.appendChild(countryOpt);

        }

    }

}



/*选择县区之后的处理函数*/

function selecCountry04(obj) {

    current04.country_number = obj.options[obj.selectedIndex].value;

    if (current04.prov_number != '' && current04.city_number != '' && current04.country_number != '') {

        btn_number.disabled = false;

    }

}

/*点击确定按钮显示用户所选的地址*/

function showAddr04() {

    addr_show_number.value = current04.prov_number + '-' + current04.city_number + '-' + current04.country_number + '-' + cityList[current04.prov_number]['city'][current04.city_number]['country'][current04.country_number]['code'];

}

// 数据来源于网络
var provice = [
    {
        name: "北京市",
        city: [
            {
                name: "北京市",
                districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]
            }
        ]
    },

    {
        name: "河北省",
        city: [
            {
                name: "石家庄市",
                districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "井陉县", "微水镇", "正定县", "正定镇", "栾城县", "栾城镇", "行唐县", "龙州镇", "灵寿县", "灵寿镇", "高邑县", "高邑镇", "深泽县", "深泽镇", "赞皇县", "赞皇镇", "无极县", "无极镇", "平山县", "平山镇", "元氏县", "槐阳镇", "赵县", "赵州镇"]
            },
            {
                name: "张家口市",
                districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区", "张北县", "张北镇", "康保县", "康保镇", "沽源县", "平定堡镇", "尚义县", "南壕堑镇", "蔚县", "蔚州镇", "阳原县", "西城镇", "怀安县", "柴沟堡镇", "万全县", "孔家庄镇", "怀来县", "沙城镇", "涿鹿县", "涿鹿镇", "赤城县", "赤城镇", "崇礼县", "西湾子镇"]
            },
            {
                name: "承德市",
                districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇", "平泉县", "平泉镇", "滦平县", "滦平镇", "隆化县", "隆化镇", "丰宁满族自治县", "大阁镇", "宽城满族自治县", "宽城镇", "围场满族蒙古族自治县", "围场镇"]
            },
            {
                name: "秦皇岛市",
                districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县", "卢龙镇", "青龙满族自治县", "青龙镇"]
            },
            {
                name: "唐山市",
                districtAndCounty: ["路北区", "路南区", "古冶区", "开平区", "丰润区", "丰南区", "遵化市", "迁安市", "滦县", "滦州镇", "滦南县", "倴城镇", "乐亭县", "乐亭镇", "迁西县", "兴城镇", "玉田县", "玉田镇", "唐海县", "唐海镇"]
            },
            {
                name: "廊坊市",
                districtAndCounty: ["安次区", "广阳区", "霸州市", "三河市", "固安县", "固安镇", "永清县", "永清镇", "香河县", "淑阳镇", "大城县", "平舒镇", "文安县", "文安镇", "大厂回族自治县", "大厂镇"]
            },
            {
                name: "保定市",
                districtAndCounty: ["新市区", "北市区", "南市区", "定州市", "涿州市", "安国市", "高碑店市", "满城县", "满城镇", "清苑县", "清苑镇", "易县", "易州镇", "徐水县", "安肃镇", "涞源县", "涞源镇", "定兴县", "定兴镇", "顺平县", "蒲阳镇", "唐县", "仁厚镇", "望都县", "望都镇", "涞水县", "涞水镇", "高阳县", "高阳镇", "安新县", "安新镇", "雄县", "雄州镇", "容城县", "容城镇", "曲阳县", "恒州镇", "阜平县", "阜平镇", "博野县", "博陵镇", "蠡县", "蠡吾镇"]
            },
            {
                name: "衡水市",
                districtAndCounty: ["桃城区", "冀州市", "深州市", "枣强县", "枣强镇", "武邑县", "武邑镇", "武强县", "武强镇", "饶阳县", "饶阳镇", "安平县", "安平镇", "故城县", "郑口镇", "景县", "景州镇", "阜城县", "阜城镇"]
            },
            {
                name: "沧州市",
                districtAndCounty: ["运河区", "新华区", "泊头市", "任丘市", "黄骅市", "河间市", "沧县", "沧州市新华区", "青县", "清州镇", "东光县", "东光镇", "海兴县", "苏基镇", "盐山县", "盐山镇", "肃宁县", "肃宁镇", "南皮县", "南皮镇", "吴桥县", "桑园镇", "献县", "乐寿镇", "孟村回族自治县", "孟村镇"]
            },
            {
                name: "邢台市",
                districtAndCounty: ["桥东区", "桥西区", "南宫市", "沙河市", "邢台县", "邢台市桥东区", "临城县", "临城镇", "内丘县", "内丘镇", "柏乡县", "柏乡镇", "隆尧县", "隆尧镇", "任县", "任城镇", "南和县", "和阳镇", "宁晋县", "凤凰镇", "巨鹿县", "巨鹿镇", "新河县", "新河镇", "广宗县", "广宗镇", "平乡县", "丰州镇", "威县", "洺州镇", "清河县", "葛仙庄镇", "临西县", "临西镇"]
            },
            {
                name: "邯郸市",
                districtAndCounty: ["丛台区", "邯山区", "复兴区", "峰峰矿区", "武安市", "邯郸县", "南堡乡东小屯村", "临漳县", "临漳镇", "成安县", "成安镇", "大名县", "大名镇", "涉县", "涉城镇", "磁县", "磁州镇", "肥乡县", "肥乡镇", "永年县", "临洺关镇", "邱县", "新马头镇", "鸡泽县", "鸡泽镇", "广平县", "广平镇", "馆陶县", "馆陶镇", "魏县", "魏城镇", "曲周县", "曲周镇"]
            }
        ]
    },

    {
        name: "黑龙江省",
        city: [
            {
                name: "哈尔滨市",
                districtAndCounty: ["松北区", "道里区", "南岗区", "道外区", "香坊区", "动力区", "平房区", "呼兰区", "双城市", "尚志市", "五常市", "阿城市", "依兰县", "依兰镇", "方正县", "方正镇", "宾县", "宾州镇", "巴彦县", "巴彦镇", "木兰县", "木兰镇", "通河县", "通河镇", "延寿县", "延寿镇"]
            },
            {
                name: "齐齐哈尔市",
                districtAndCounty: ["建华区", "龙沙区", "铁锋区", "昂昂溪区", "富拉尔基区", "碾子山区", "梅里斯达斡尔族区", "讷河市", "龙江县", "龙江镇", "依安县", "依安镇", "泰来县", "泰来镇", "甘南县", "甘南镇", "富裕县", "富裕镇", "克山县", "克山镇", "克东县", "克东镇", "拜泉县", "拜泉镇"]
            },
            {
                name: "七台河市",
                districtAndCounty: ["桃山区", "新兴区", "茄子河区", "勃利县", "勃利镇"]
            },
            {
                name: "黑河市",
                districtAndCounty: ["爱辉区", "北安市", "五大连池市", "嫩江县", "嫩江镇", "逊克县", "边疆镇", "孙吴县", "孙吴镇"]
            },
            {
                name: "大庆市",
                districtAndCounty: ["萨尔图区", "龙凤区", "让胡路区", "大同区", "红岗区", "肇州县", "肇州镇", "肇源县", "肇源镇", "林甸县", "林甸镇", "杜尔伯特蒙古族自治县", "泰康镇"]
            },
            {
                name: "鹤岗市",
                districtAndCounty: ["兴山区", "向阳区", "工农区", "南山区", "兴安区", "东山区", "萝北县", "凤翔镇", "绥滨县", "绥滨镇"]
            },
            {
                name: "伊春市",
                districtAndCounty: ["伊春区", "南岔区", "友好区", "西林区", "翠峦区", "新青区", "美溪区", "金山屯区", "五营区", "乌马河区", "汤旺河区", "带岭区", "乌伊岭区", "红星区", "上甘岭区", "铁力市", "嘉荫县", "朝阳镇"]
            },
            {
                name: "佳木斯市",
                districtAndCounty: ["前进区", "永红区", "向阳区", "东风区", "郊区", "同江市", "富锦市", "桦南县", "桦南镇", "桦川县", "悦来镇", "汤原县", "汤原镇", "抚远县", "抚远镇"]
            },
            {
                name: "双鸭山市",
                districtAndCounty: ["尖山区", "岭东区", "四方台区", "宝山区", "集贤县", "福利镇", "友谊县", "友谊镇", "宝清县", "宝清镇", "饶河县", "饶河镇"]
            },
            {
                name: "鸡西市",
                districtAndCounty: ["鸡冠区", "恒山区", "滴道区", "梨树区", "城子河区", "麻山区", "虎林市", "密山市", "鸡东县", "鸡东镇"]
            },
            {
                name: "牡丹江市",
                districtAndCounty: ["爱民区", "东安区", "阳明区", "西安区", "穆棱市", "绥芬河市", "海林市", "宁安市", "东宁县", "东宁镇", "林口县", "林口镇"]
            },
            {
                name: "绥化市",
                districtAndCounty: ["北林区", "安达市", "肇东市", "海伦市", "望奎县", "望奎镇", "兰西县", "兰西镇", "青冈县", "青冈镇", "庆安县", "庆安镇", "明水县", "明水镇", "绥棱县", "绥棱镇"]
            },
            {
                name: "大兴安岭地区",
                districtAndCounty: ["呼玛县", "呼玛镇", "塔河县", "塔河镇", "漠河县", "西林吉镇"]
            }
        ]
    },

    {
        name: "山东省",
        city: [
            {
                name: "济南市",
                districtAndCounty: ["市中区", "历下区", "槐荫区", "天桥区", "历城区", "长清区", "章丘市", "平阴县", "平阴镇", "济阳县", "济阳镇", "商河县"]
            },
            {
                name: "青岛市",
                districtAndCounty: ["市南区", "市北区", "四方区", "黄岛区", "崂山区", "城阳区", "李沧区", "胶州市", "即墨市", "平度市", "胶南市", "莱西市"]
            },
            {
                name: "聊城市",
                districtAndCounty: ["东昌府区", "临清市", "阳谷县", "莘县", "茌平县", "东阿县", "冠县", "冠城镇", "高唐县"]
            },
            {
                name: "德州市",
                districtAndCounty: ["德城区", "乐陵市", "禹城市", "陵县", "陵城镇", "平原县", "夏津县", "夏津镇", "武城县", "武城镇", "齐河县", "晏城镇", "临邑县", "宁津县", "宁津镇", "庆云县", "庆云镇"]
            },
            {
                name: "东营市",
                districtAndCounty: ["东营区", "河口区", "垦利县", "垦利镇", "利津县", "利津镇", "广饶县", "广饶镇"]
            },
            {
                name: "淄博市",
                districtAndCounty: ["张店区", "淄川区", "博山区", "临淄区", "周村区", "桓台县", "索镇", "高青县", "田镇", "沂源县", "南麻镇"]
            },
            {
                name: "潍坊市",
                districtAndCounty: ["潍城区", "寒亭区", "坊子区", "奎文区", "安丘市", "昌邑市", "高密市", "青州市", "诸城市", "寿光市", "临朐县", "昌乐县"]
            },
            {
                name: "烟台市",
                districtAndCounty: ["莱山区", "芝罘区", "福山区", "牟平区", "栖霞市", "海阳市", "龙口市", "莱阳市", "莱州市", "蓬莱市", "招远市", "长岛县", "南长山镇"]
            },
            {
                name: "威海市",
                districtAndCounty: ["环翠区", "荣成市", "乳山市", "文登市"]
            },
            {
                name: "日照市",
                districtAndCounty: ["东港区", "岚山区", "五莲县", "洪凝镇", "莒县", "城阳镇"]
            },
            {
                name: "临沂市",
                districtAndCounty: ["兰山区", "罗庄区", "河东区", "郯城县", "郯城镇", "苍山县", "卞庄镇", "莒南县", "十字路镇", "沂水县", "沂水镇", "蒙阴县", "蒙阴镇", "平邑县", "平邑镇", "费县", "费城镇", "沂南县", "界湖镇", "临沭县", "临沭镇"]
            },
            {
                name: "枣庄市",
                districtAndCounty: ["薛城区", "市中区", "峄城区", "台儿庄区", "山亭区", "滕州市"]
            },
            {
                name: "济宁市",
                districtAndCounty: ["市中区", "任城区", "曲阜市", "兖州市", "邹城市", "微山县", "鱼台县", "谷亭镇", "金乡县", "金乡镇", "嘉祥县", "嘉祥镇", "汶上县", "汶上镇", "泗水县", "梁山县", "梁山镇"]
            },
            {
                name: "泰安市",
                districtAndCounty: ["泰山区", "岱岳区", "新泰市", "肥城市", "宁阳县", "宁阳镇", "东平县", "东平镇"]
            },
            {
                name: "莱芜市",
                districtAndCounty: ["莱城区", "钢城区"]
            },
            {
                name: "滨州市",
                districtAndCounty: ["滨城区", "惠民县", "惠民镇", "阳信县", "阳信镇", "无棣县", "无棣镇", "沾化县", "富国镇", "博兴县", "博兴镇", "邹平县"]
            },
            {
                name: "菏泽市",
                districtAndCounty: ["牡丹区", "曹县", "曹城镇", "定陶县", "定陶镇", "成武县", "成武镇", "单县", "单城镇", "巨野县", "巨野镇", "郓城县", "郓城镇", "鄄城县", "鄄城镇", "东明县"]
            }
        ]
    },

    {
        name: "香港",
        city: [
            {
                name: "香港特别行政区",
                districtAndCounty: ["中西区", "东区", "九龙城区", "观塘区", "南区", "深水埗区", "湾仔区", "黄大仙区", "油尖旺区", "离岛区", "葵青区", "北区", "西贡区", "沙田区", "屯门区", "大埔区", "荃湾区", "元朗区"]
            }
        ]
    },
    {
        name: "澳门",
        city: [
            {
                name: "澳门特别行政区",
                districtAndCounty: ["澳门特别行政区"]
            }
        ]
    },

];

总结

原文链接

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

大佬的github链接

https://github.com/visugar/FrontEnd-examples

ice三分颜色
关注
  • 14
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
全国省市区地区js版
01-30
全国地区省市区码表，实现三级联动js版。省市区联动js版，简单。
JS实现省市区三级联动（json假数据）
rr20060119的博客
04-01 828
省市级三级联动通常指的是在用户界面上，用户可以通过选择省份，然后基于所选择的省份选择对应的城市，最后基于所选择的城市选择对应的区县。同样地，为城市的元素添加change事件监听器，当用户选择城市时，根据所选城市动态生成区县的元素，并绑定到区县的元素上。为省份的元素添加change事件监听器，当用户选择省份时，根据所选省份动态生成城市的元素，并绑定到城市的元素上。当页面加载时，首先加载JSON数据。
利用原生JS实现省市区三级联动（详解）
小苏(º﹃º )的博客
05-09 1万+
JavaScript实现省市区三级联动1.遍历数据2.二级联动的实现3.三级联动的实现 1.遍历数据 数据链接 提取码: bv3t 2.二级联动的实现 3.三级联动的实现
js实现省市区三级联动
最新发布
2302_80798583的博客
06-16 166
【代码】js实现省市区三级联动。
JavaScript实现省市区三级联动
热门推荐
qq_39155611的博客
06-03 1万+
JavaScript实现省市区三级联动 之前的文章中我们说到过如何利用JavaScript实现二级联动，这次我们来说说如何利用JavaScript实现三级联动。效果如图： HTML代码： 请选择省份：<select name="" id="province"> <option value="">请选择省份......</option> </select> 请选择城市：<select name="" id="cit
js 实现省市区/县三级联动
PSG_li的博客
05-24 2014
js 实现省市区/县三级联动。
JS实现省市区三级联动
Java学习博客
08-27 4684
通过js实现省市区三级联动，详细实现步骤和代码
原生js实现简单的省市区联动效果
沐小侠
11-03 3247
省市区实现思路： ① 一维数组 provinces 保存省、自治区和直辖市。 ② 二维数组 cities 保存对应省、自治区和直辖市下的所有城市，存储时要保证 cities[index]中 index 值与对应 provinces 中元素的下标索引相同。 ③ 同理，利用三维数组保存每个城市下的区域的所有区域。 ① 创建 HTML 表单，实现省份、城市、区域的下拉列表。 ② 创建数组保存省份城市区域的数据。 ③ 编写函数 createOption()用于创建指定下拉菜单的选项。
js 实现省市区三级联动菜单效果
10-20
本文主要分享了js实现省市区三级联动菜单效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
uni-app实现省市区三级联动的js文件
10-22
本文件是uni-app实现省市区三级联动中的data.js文件，详情见博客：https://whhtjl.blog.csdn.net/article/details/109216246
javascript实现省市区三级联动下拉框菜单
10-23
主要介绍了javascript实现省市区三级联动下拉框菜单很详细的代码，解决了大家实现javascript省市区三级联动下拉框菜单的问题，感兴趣的小伙伴们可以参考一下
纯js实现省市区三级联动
05-16
在"纯js实现省市区三级联动"的项目中，开发者通过JavaScript代码，创建了三个下拉列表，分别代表省份、城市和区县。这些下拉列表的数据来源通常是JSON格式，因为JSON是一种轻量级的数据交换格式，易于人阅读和编写，...
JavaScript 省市区三级联动 json文件
11-25
省市区三级联动 , JavaScript 省市区三级联动 json文件,JavaScript 省市区三级联动 json文件
js 实现三级联动
qq_60504665的博客
09-23 1321
其中三级联动是比较常见的功能，比如实现省、市、区的联动选择。实现三级联动的核心是使用JavaScript根据用户的选择动态生成选项，下面将通过举例说明如何实现一个省、市、区的三级联动选择。当用户选择省份时，上面的代码会触发change事件，接下来需要根据选择的省份动态生成市级选项。上面的代码首先清空了区级选项，然后根据用户选择的市级选项动态生成区级选项，最后将生成的选项添加到区级下拉框中。上面的代码首先清空了市级选项，然后根据用户选择的省份动态生成市级选项，最后将生成的选项添加到市级下拉框中。
用JavaScript实现省份城市的三级联动
程序yan的博客
10-05 2295
简单的三级联动代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省份城市的三级联动</title> <style> select{ width:150px; height:35px;} </style> </head> <body> <select class
JavaScript实现省市区三级联动(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 207
JavaScript实现省市区三级联动(附完整源码)
js三级联动地址选择
weixin_34150224的博客
03-17 727
/* * 全国三级城市联动 js版 wlit.版权所有 **/ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(t...
原生JS实现省市区（县）三级联动选择
Visugar
06-09 8763
原文地址→看过来写在前面前段时间写一个关于天气的东西，里面的省市区（县）城市选择让我很头疼，在网上搜索出来大都是借助插件或者第三方库，感觉这样做代码会很重，所以索性就把几种城市选择的方式实现一遍，以备日后的不时之需。这三种方法都是针对pc端的，并且都是使用原生js实现的，连jq都没使用，于是代码有点繁琐额（尴尬）。。。。不过还是让我把原理讲完吧。源代码地址→传送门预览地址→传送门方法一：下拉选择框实
js实现省市区三级联动非select下拉框版
12-19
实现省市区三级联动的非select下拉框版，可以利用js和html来实现。 首先，我们可以在html中创建三个空的div元素，分别代表省、市、区的容器。然后，利用js动态创建并添加相应的下拉框元素到对应的div中。 在js中，我们可以先定义一个包含省市区信息的json数据。然后，利用事件监听的方式，当省下拉框发生改变时，动态生成市的下拉框并添加到相应的div中；同理，当市下拉框发生改变时，动态生成区的下拉框并添加到相应的div中。 除此之外，我们还可以利用ajax来从后台获取省市区的数据，实现动态的省市区三级联动。当页面加载时，先通过ajax请求获取省的数据，然后利用js动态生成省的下拉框并添加到对应的div中；当选择省时，再通过ajax请求获取对应的市数据，再动态生成市的下拉框；当选择市时，再通过ajax请求获取对应的区数据，并动态生成区的下拉框。 通过以上的方式，我们就可以实现一个非select下拉框版的省市区三级联动。这样的实现方式不仅可以提升用户体验，还可以减少页面的加载开销和提高页面的响应速度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值