中国五级行政区划下拉菜单模块下载html、css、js源码下载

js文件中直接包含省市县镇村五级数据，免数据库建设，免服务端查询工具开发

下载包包含2、3、4、5级行政区划下拉菜单，均包含完整的html、css、js源码

部分代码

let provinceArr = [
            "安徽省",
            "澳门特别行政区",
            "北京市",
            "重庆市",
            "福建省",
            "甘肃省",
            "..."
            ]

let cityArr = [
        {
            "province": "安徽省",
            "citys": [
                "市",
                "合肥市",
                "芜湖市",
                "蚌埠市",
                "淮南市",
                "..."],
                "..."
        },
        "..."
        ]

let districtArr = [
            {
                "city": "合肥市",
                "districts": [
                    "区/县",
                    "蜀山区",
                    "瑶海区",
                    "庐阳区",
                    "..."
                    ],
                    "..."
            }
            ]

let townArr = [
    {
        "city": "合肥市",
        "district": "区/县",
        "towns": [
            "乡/镇"
        ]
    },
    {
        "city": "合肥市",
        "district": "蜀山区",
        "towns": [
            "乡/镇",
            "三里庵街道",
            "稻香村街道",
            "琥珀街道",
            "南七街道",
            "..."
            ]
    }
    ]

let villageArr = [
    {
        "district": "蜀山区",
        "town": "三里庵街道",
        "villages": [
            "梅山路社区居委会",
            "绩溪路社区居委会",
            "二里街社区居委会",
            "竹荫里社区委员会",
            "杏林社区居委会",
            "龙河路社区居委会"
        ]
    },
    "..."
    ]


// 点选省份及创建城市select
let citySelect = document.getElementById('citySelect')
function selectProvinceLoadDistrict() {
    // 删除上一次点选省份创建的城市
    while (citySelect.firstChild) {
        citySelect.removeChild(citySelect.firstChild)
    }

    provinceSelected = provinceSelect.value

    let cityArrTemp = cityArr.filter(item =>
        item.province === provinceSelected
    )
    let cityArrTemp2 = cityArrTemp[0].citys

    cityArrTemp2.forEach(element => {
        let Option = document.createElement('option')
        Option.textContent = element
        citySelect.appendChild(Option)
    });
}

下载源码（数据本地版）

如果觉得行政区划数据都放在js文件里体积太大，可以下载数据库版

数据均为向数据库请求获得，不占用js文件体积

下载的文件中包含下拉菜单html css js源码以及全国5级行政区划sql数据库文件

部分代码

html


<!-- 省 -- >
<select name="" id="provinceSelect" class="districtSelect" >
    <option value="" >省 </option >
</select >
       
<!-- 市 -- >
<select name="" id="citySelect" class="districtSelect" >
    <option value="" >市 </option >
</select >
       
<!-- 县 -- >
<select name="" id="districtSelect" class="districtSelect" >
    <option value="" >县 </option >
</select >
       
<!-- 镇 -- >
<select name="" id="townSelect" class="districtSelect" >
    <option value="" >镇 </option >
</select >
       
<!-- 村 -- >
<select name="" id="villageSelect" class="districtSelect" >
    <option value="" >村 </option >
</select >

// 通用请求及加载函数
function getAndLoadOptions(selectToBeAppended, dataNeeded, column1, column2, selectedName1, selectedName2) {
    while (selectToBeAppended.firstChild) {
        selectToBeAppended.removeChild(selectToBeAppended.firstChild)
    }

    fetch('API/getOptions.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            dataNeeded: dataNeeded,
            column1: column1,
            column2: column2,
            selectedName1: selectedName1,
            selectedName2: selectedName2
        })
    })
        .then(response => response.json())
        .then(data => {
            // console.log(data);

            // 处理返回的数据
            // 例如，将数据填充到相应的select元素中
            data.forEach(item => {
                let option = document.createElement('option');
                option.value = item;
                option.text = item;
                selectToBeAppended.appendChild(option);
            });
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

// 创建省份select
document.addEventListener('DOMContentLoaded', function () {

    provinceArr.forEach(item => {
        let provinceOption = document.createElement('option')
        provinceOption.textContent = item
        provinceSelect.appendChild(provinceOption)
    });
})

向数据库请求行政区划数据的php接口


$stmt = $link->prepare("SELECT distinct $dataNeeded FROM chinesedistrict WHERE $column1=? and $column2=? ;");
$stmt->bind_param("ss", $selectedName1, $selectedName2);
$stmt->execute();
$result = $stmt->get_result();

if ($result) {
    if ($result->num_rows > 0) {
        $dataNeededTemp = [];
        while ($row = $result->fetch_assoc()) {
            $dataNeededTemp[] = $row[$dataNeeded];
        }

        echo json_encode($dataNeededTemp);

    } else {
        echo json_encode([
            'time' => date('Y-m-d H:i:s'),
            'dataNeeded' => $dataNeeded,
        ]);
    }

只需将数据库信息修改为自己的信息即可使用

$link = mysqli_connect('localhost', 'yourUsername', 'yourPassword', 'yourDatabaseName');

$stmt = $link->prepare("SELECT distinct city FROM ` chinesedistrict` WHERE `province`=? ;");

下载源码（数据请求版）