JavaScript三级联动jQuery写法

最新推荐文章于 2024-08-06 12:58:11 发布

派大鑫的工作室

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量167

点赞数 1

文章标签： javascript jquery 开发语言

本文链接：https://blog.csdn.net/Cc040909/article/details/140917630

版权

HTML结构

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

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>三级联动</title>
	<!-- <style>
		select {
			margin: 10px 0;
			padding: 5px;
			width: 200px;
		}
	</style> -->

	<script src="./js/jquery-3.7.1.js"></script>
</head>

<body>
	<select id="provinceSelect">
		<option value="">请选择省份</option>
	</select>
	<select id="citySelect">
		<option value="">请先选择省份</option>
	</select>
	<select id="countySelect">
		<option value="">请先选择省份</option>
	</select>
	<button onclick="showResult()">显示结果</button>

	<script src="./js/local.js"></script>
</body>

</html>

JS部分的jQuery写法

// 使用jQuery选择器获取省份、城市、区县选择器的DOM元素
let provinceSelect = $('#provinceSelect');
let citySelect = $('#citySelect');
let countySelect = $('#countySelect');
let data; // 用于存储省市县数据的变量

// 加载数据的函数
function loadData() {
    // 使用jQuery的ajax方法从JSON文件加载数据，假设文件路径为 'js/locals.json'
    $.ajax({
        // 设置请求的文件路径为 'js/locals.json'
        url: 'js/localss.json',
        // 设置请求的数据类型为JSON
        dataType: 'json',
        // 请求成功后调用success函数处理数据
        success: function (json) {
            // 将数据存储在全局变量data中
            data = json; 
            // 调用填充省份数据的函数
            populateProvinces(); 
        }
    });
}

// 填充省份数据的函数
function populateProvinces() {
    // 清空省份选择框
    provinceSelect.empty();
    // 添加默认选项
    provinceSelect.append($('<option value="">请选择省份</option>'));
    // 遍历数据中的每个省份，创建并添加一个选项元素
    $.each(data, function (index, province) {
        // 创建一个option元素，设置其value属性为省份的索引值，text属性为省份的名称
        provinceSelect.append($('<option></option>').text(province.province));
    });
}

// 根据选择的省份填充城市数据的函数
function populateCities(provinceIndex) {
    // 清空城市选择框和区县选择框
    citySelect.empty();
    // 添加默认选项
    citySelect.append($('<option value="">请选择城市</option>'));
    countySelect.empty();
    countySelect.append($('<option value="">请先选择城市</option>'));

    let cities = data[provinceIndex].cities;
    // 遍历城市数据，创建并添加选项元素
    $.each(cities, function (index, city) {
        citySelect.append($('<option></option>').text(city.city));
    });
}

// 根据选择的城市填充区县数据的函数
function populateCounties(provinceIndex, cityIndex) {
    // 清空区县选择框
    countySelect.empty();
    countySelect.append($('<option value="">请选择区县</option>'));

    let counties = data[provinceIndex].cities[cityIndex].counties;
    // 遍历区县数据，创建并添加选项元素
    $.each(counties, function (index, county) {
        countySelect.append($('<option></option>').text(county));
    });
}

// 当省份选择器的选项改变时，调用此函数
$('#provinceSelect').on('change', function () {
    let provinceIndex = $(this).prop('selectedIndex') - 1; // -1是因为第一个option是请选择省份
    if (provinceIndex >= 0) {
        populateCities(provinceIndex);
    } else {
        citySelect.empty();
        // 添加默认选项请选择城市
        citySelect.append($('<option value="">请选择城市</option>'));
        countySelect.empty();
        // 添加选项为请先选择区县
        countySelect.append($('<option value="">请选择区县</option>'));
    }
});

// 当城市选择器的选项改变时，调用此函数
$('#citySelect').on('change', function () {
    let provinceIndex = $('#provinceSelect').prop('selectedIndex') - 1;
    let cityIndex = $(this).prop('selectedIndex') - 1;
    if (cityIndex >= 0) {
        populateCounties(provinceIndex, cityIndex);
    } else {
        countySelect.empty();
        countySelect.append($('<option value="">请选择区县</option>'));
    }
});

// 显示选择结果的函数
function showResult() {
    // 获取省份、城市、区县的value值
    let province = $('#provinceSelect option:selected').text();
    let city = $('#citySelect option:selected').text();
    let county = $('#countySelect option:selected').text();

    if (province && city && county) {
        // 弹窗显示选择结果
        alert(`您选择的结果是：${province} - ${city} - ${county}`);
    }
}

// 页面加载完成后加载数据
$(document).ready(function () {
    // 调用加载数据的函数
    loadData();
});

带有详细注释家人们！