实训3. 使用数组方式实现省市级联效果(选做) 训练要点 (1)掌握数组的应用 (2)掌握下拉列表框的常用事件onchange 需求说明 实现省份和城市的级联效果。在页面加载时,将省份加载到“省份”下拉列表框,当省份下拉列表框的内容发生改变时,“城市”列表框显示对应省份的城市。 图3 省市级联效果 实现思路及步骤 (1)制作HTML页面。 (2)定义数组,添加脚本,效果实现有多种方式。 (3)使用onchange事件。 实训4. 使用JSON方式实现省市级联效果(必做) 训练要点 (1)掌握JSON的应用 (2)掌握下拉列表框的常用事件onchange 需求说明 根据实训3的要求,使用JSON方式实现。
理解问题实训3. 使用数组方式实现省市级联效果(选做) 训练要点 (1)掌握数组的应用 (2)掌握下拉列表框的常用事件onchange 需求说明 实现省份和城市的级联效果。在页面加载时,将省份加载到“省份”下拉列表框,当省份下拉列表框的内容发生改变时,“城市”列表框显示对应省份的城市。 图3 省市级联效果 实现思路及步骤 (1)制作HTML页面。 (2)定义数组,添加脚本,效果实现有多种方式。 (3)使用onchange事件。 实训4. 使用JSON方式实现省市级联效果(必做) 训练要点 (1)掌握JSON的应用 (2)掌握下拉列表框的常用事件onchange 需求说明 根据实训3的要求,使用JSON方式实现。
已完成理解「实训3. 使用数组方式实现省市级联效果(选做) 训练要点 (1)掌握数组的应用 (2)掌握下拉列表框的常用事件onchange 需求说明 实现省份和城市的级联效果。在页面加载时,将省份加载到“省份”下拉列表框,当省份下拉列表框的内容发生改变时,“城市”列表框显示对应省份的城市。 图3 省市级联效果 实现思路及步骤 (1)制作HTML页面。 (2)定义数组,添加脚本,效果实现有多种方式。 (3)使用onchange事件。 实训4. 使用JSON方式实现省市级联效果(必做) 训练要点 (1)掌握JSON的应用 (2)掌握下拉列表框的常用事件onchange 需求说明 根据实训3的要求,使用JSON方式实现。」
展开阅读网页
实训3. 使用数组方式实现省市级联效果(选做)
训练要点
(1)掌握数组的应用
(2)掌握下拉列表框的常用事件onchange
需求说明
实现省份和城市的级联效果。在页面加载时,将省份加载到“省份”下拉列表框,当省份下拉列表框的内容发生改变时,“城市”列表框显示对应省份的城市。
图3 省市级联效果
实现思路及步骤
(1)制作HTML页面。
(2)定义数组,添加脚本,效果实现有多种方式。
(3)使用onchange事件。
实训4. 使用JSON方式实现省市级联效果(必做)
训练要点
(1)掌握JSON的应用
(2)掌握下拉列表框的常用事件onchange
需求说明
根据实训3的要求,使用JSON方式实现。
🌐 实现步骤
- HTML页面:创建包含省份和城市下拉列表的HTML表单。1
- 数组定义:使用数组存储省份和城市的对应关系。7
- 脚本添加:编写JavaScript代码,实现页面加载时填充省份下拉列表,并在省份选择变化时动态加载对应城市。7
- 事件监听:使用
onchange
事件监听省份下拉列表的变化,触发城市列表的更新。10
📜 代码示例
var city = [
{"name":"广东省","info":['广州市','深圳市','佛山市', '珠海市']},
{"name":"四川省","info":['成都市','德阳市','绵阳市','广元市']},
{"name":"云南省","info":['昆明市','大理市','丽江市']},
{"name":"贵州省","info":['贵阳市','遵义市']}
];
function show(){
for (var i in city){
document.getElementById("province").innerHTML+="<option>"+city[i].name+"</option>";
}
}
function loadCity(){
document.getElementById("city").options.length=0;
document.getElementById("city").add(new Option("--请选择--"));
var province=document.getElementById("province").value;
for (var i in city){
if (city[i].name==province){
var citys=city[i].info;
for (var j in citys){
document.getElementById("city").innerHTML+="<option>"+citys[j]+"</option>"
}
}
}
}
📊 运行结果
- 页面加载:省份下拉列表显示所有省份。
- 省份选择:选择省份后,城市下拉列表动态显示对应城市。7
📝 其他代码(.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON实现省市级联</title>
<script src="js/provinceCityJSON.js"></script>
</head>
<style type="text/css">
select
{
width: 100px;
text-align: center;
margin: 5px;
align-content: center;
margin-top: 30px;
background-color: #D9FFDC;
}
</style>
<body onLoad="show()">
<form>
<center>
省份:<select name=" province" id="province" onchange="loadCity()" required>
<option>--请选择--</option>
</select>
城市:<select name="city" id="city" required>
<option>--请选择--</option>
</select>
</center>
</form>
</body>
</html>
📚 学习资源
使用数组和JSON方式实现省市级联效果是前端开发中常见的任务,尤其是在处理用户地址选择等场景中。这两种方法各有优劣,适用于不同的开发需求和场景。以下将详细介绍如何使用数组和JSON实现省市级联效果,并探讨各自的实现思路和步骤。
🌐 使用数组实现省市级联效果
数组的应用
数组是一种线性数据结构,适合存储一组有序的数据。在实现省市级联效果时,数组可以用来存储省份和城市的对应关系。通过数组的索引和属性,可以方便地管理和访问这些数据。
下拉列表框的常用事件onchange
onchange
事件是HTML表单元素(如下拉列表框)的常用事件之一,当用户选择不同的选项时,该事件会被触发。通过监听onchange
事件,可以动态地更新城市列表框的内容,实现省市级联效果。
实现思路及步骤
- 制作HTML页面:创建包含省份和城市下拉列表框的HTML页面。
- 定义数组:使用数组存储省份和城市的对应关系。
- 添加脚本:编写JavaScript代码,监听省份下拉列表框的
onchange
事件,并根据选择的省份动态更新城市列表框的内容。
代码示例
<!DOCTYPE html>
<html>
<head>
<title>省市级联效果</title>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<script>
// 定义省份和城市的数组
const provinces = {
"湖北省": ["武汉市", "黄石市", "十堰市"],
"湖南省": ["长沙市", "株洲市", "湘潭市"],
"广东省": ["广州市", "深圳市", "珠海市"],
"广西省": ["南宁市", "柳州市", "桂林市"]
};
// 加载省份
const provinceSelect = document.getElementById('province');
for (let province in provinces) {
provinceSelect.options.add(new Option(province, province));
}
// 监听省份下拉列表框的onchange事件
provinceSelect.onchange = function() {
const selectedProvince = this.value;
const citySelect = document.getElementById('city');
citySelect.innerHTML = '<option value="">请选择城市</option>';
if (selectedProvince) {
const cities = provinces[selectedProvince];
for (let city of cities) {
citySelect.options.add(new Option(city, city));
}
}
};
</script>
</body>
</html>
🌐 使用JSON实现省市级联效果
JSON的应用
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成。使用JSON可以更灵活地组织和管理数据,适合复杂的省市级联关系。
下拉列表框的常用事件onchange
与数组方式相同,使用onchange
事件监听省份下拉列表框的变化,并根据选择的省份动态更新城市列表框的内容。
实现思路及步骤
- 制作HTML页面:创建包含省份和城市下拉列表框的HTML页面。
- 定义JSON数据:使用JSON格式存储省份和城市的对应关系。
- 添加脚本:编写JavaScript代码,监听省份下拉列表框的
onchange
事件,并根据选择的省份动态更新城市列表框的内容。
代码示例
<!DOCTYPE html>
<html>
<head>
<title>省市级联效果</title>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<script>
// 定义省份和城市的JSON数据
const provinces = {
"湖北省": ["武汉市", "黄石市", "十堰市"],
"湖南省": ["长沙市", "株洲市", "湘潭市"],
"广东省": ["广州市", "深圳市", "珠海市"],
"广西省": ["南宁市", "柳州市", "桂林市"]
};
// 加载省份
const provinceSelect = document.getElementById('province');
for (let province in provinces) {
provinceSelect.options.add(new Option(province, province));
}
// 监听省份下拉列表框的onchange事件
provinceSelect.onchange = function() {
const selectedProvince = this.value;
const citySelect = document.getElementById('city');
citySelect.innerHTML = '<option value="">请选择城市</option>';
if (selectedProvince) {
const cities = provinces[selectedProvince];
for (let city of cities) {
citySelect.options.add(new Option(city, city));
}
}
};
</script>
</body>
</html>
🌐 总结与建议
数组与JSON的比较
- 数组:适合简单的数据结构,易于理解和实现,但扩展性较差。
- JSON:适合复杂的数据结构,灵活性高,易于扩展和维护。
选择合适的实现方式
- 如果数据结构简单且不需要频繁更新,可以选择数组方式。
- 如果数据结构复杂或需要频繁更新,建议使用JSON方式。
进一步优化
- 可以考虑将数据存储在服务器端,通过AJAX动态加载数据,提高应用的灵活性和可维护性。
- 可以添加更多的交互效果,如动画、提示信息等,提升用户体验。
通过以上步骤和代码示例,可以轻松实现省市级联效果,满足不同的开发需求。