编写一个应用程序,实现地址的选择,效果如下图所示 参考效果:
时间: 2024-05-16 10:16:49 浏览: 68
很高兴为您提供编写地址选择应用程序的帮助。我将提供一个简单的示例程序,您可以根据您的需求进行修改和扩展。
首先,我们需要使用 HTML 和 CSS 构建基本的页面布局和样式。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>地址选择</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.select {
margin-bottom: 20px;
width: 300px;
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
background-color: #fff;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
font-size: 16px;
outline: none;
}
.btn {
width: 100%;
height: 40px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
outline: none;
}
.btn:hover {
background-color: #0069d9;
}
</style>
</head>
<body>
<div class="container">
<select class="select" id="province">
<option value="">请选择省份</option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="广东省">广东省</option>
<option value="浙江省">浙江省</option>
</select>
<select class="select" id="city">
<option value="">请选择城市</option>
</select>
<select class="select" id="area">
<option value="">请选择区县</option>
</select>
<button class="btn" onclick="submit()">确定</button>
</div>
<script>
var cityData = {
"北京市": ["北京市"],
"上海市": ["上海市"],
"广东省": ["广州市", "深圳市", "珠海市", "汕头市", "韶关市", "佛山市", "江门市", "湛江市", "茂名市", "肇庆市", "惠州市", "梅州市", "汕尾市", "河源市", "阳江市", "清远市", "东莞市", "中山市", "潮州市", "揭阳市", "云浮市"],
"浙江省": ["杭州市", "宁波市", "温州市", "嘉兴市", "湖州市", "绍兴市", "金华市", "衢州市", "舟山市", "台州市", "丽水市"]
};
function submit() {
var province = document.getElementById("province").value;
var city = document.getElementById("city").value;
var area = document.getElementById("area").value;
if (province == "" || city == "" || area == "") {
alert("请选择完整的地址信息!");
return;
}
alert("您选择的地址是:" + province + " " + city + " " + area);
}
function loadCity() {
var province = document.getElementById("province").value;
var citySelect = document.getElementById("city");
citySelect.innerHTML = "<option value=''>请选择城市</option>";
if (province != "") {
var cities = cityData[province];
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.text = cities[i];
citySelect.appendChild(option);
}
}
loadArea();
}
function loadArea() {
var province = document.getElementById("province").value;
var city = document.getElementById("city").value;
var areaSelect = document.getElementById("area");
areaSelect.innerHTML = "<option value=''>请选择区县</option>";
if (province != "" && city != "") {
var areas = areaData[province][city];
for (var i = 0; i < areas.length; i++) {
var option = document.createElement("option");
option.value = areas[i];
option.text = areas[i];
areaSelect.appendChild(option);
}
}
}
document.getElementById("province").addEventListener("change", loadCity);
document.getElementById("city").addEventListener("change", loadArea);
</script>
</body>
</html>
```
在这个示例程序中,我们使用了三个 `select` 元素来分别选择省份、城市和区县。当一个 `select` 元素的值被改变时,我们会根据当前选择的值动态生成下一个 `select` 元素的选项。例如,当选择了某个省份后,我们会根据这个省份的城市列表来生成城市选项。
另外,我们还添加了一个 `submit` 函数来处理用户提交地址的操作。在该函数中,我们会检查用户是否选择了完整的地址信息,如果没有选择完整,则弹出提示框告知用户。
最后,我们使用了一些简单的 CSS 样式来美化页面元素。
希望这个示例程序能够为您提供一些帮助,如果您有任何问题或需要进一步的帮助,请随时告诉我。
阅读全文