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(); });
带有详细注释家人们！
