写一个html5移动端收货地址下拉框js
时间: 2023-08-12 13:05:34 浏览: 44
好的,我可以帮你解决这个问题。以下是一个简单的html5移动端收货地址下拉框js的实现代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动端收货地址下拉框</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
label {
display: block;
margin-bottom: 6px;
}
select {
width: 100%;
padding: 10px 5px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 14px;
line-height: 1.5;
}
</style>
</head>
<body>
<form>
<label for="province">省份:</label>
<select id="province">
<option value="">请选择省份</option>
<option value="1">北京市</option>
<option value="2">上海市</option>
<option value="3">广东省</option>
</select>
<label for="city">城市:</label>
<select id="city">
<option value="">请选择城市</option>
</select>
<label for="area">区县:</label>
<select id="area">
<option value="">请选择区县</option>
</select>
</form>
<script>
// 初始化省份下拉框
var provinceSelect = document.getElementById('province');
provinceSelect.addEventListener('change', function() {
var citySelect = document.getElementById('city');
citySelect.innerHTML = '<option value="">请选择城市</option>';
var areaSelect = document.getElementById('area');
areaSelect.innerHTML = '<option value="">请选择区县</option>';
if (provinceSelect.value === '') {
return;
}
var cities = [{
id: 1,
name: '北京市',
areas: [{
id: 101,
name: '东城区'
}, {
id: 102,
name: '西城区'
}]
}, {
id: 2,
name: '上海市',
areas: [{
id: 201,
name: '黄浦区'
}, {
id: 202,
name: '徐汇区'
}]
}, {
id: 3,
name: '广东省',
areas: [{
id: 301,
name: '广州市'
}, {
id: 302,
name: '深圳市'
}]
}];
var provinceId = parseInt(provinceSelect.value);
var citiesInProvince = cities.find(function(c) {
return c.id === provinceId;
}).cities;
citiesInProvince.forEach(function(c) {
var option = document.createElement('option');
option.value = c.id;
option.textContent = c.name;
citySelect.appendChild(option);
});
});
// 初始化城市下拉框
var citySelect = document.getElementById('city');
citySelect.addEventListener('change', function() {
var areaSelect = document.getElementById('area');
areaSelect.innerHTML = '<option value="">请选择区县</option>';
if (citySelect.value === '') {
return;
}
var cities = [{
id: 1,
name: '北京市',
areas: [{
id: 101,
name: '东城区'
}, {
id: 102,
name: '西城区'
}]
}, {
id: 2,
name: '上海市',
areas: [{
id: 201,
name: '黄浦区'
}, {
id: 202,
name: '徐汇区'
}]
}, {
id: 3,
name: '广东省',
areas: [{
id: 301,
name: '广州市'
}, {
id: 302,
name: '深圳市'
}]
}];
var cityId = parseInt(citySelect.value);
var areasInCity = cities
.map(function(c) {
return c.areas;
})
.reduce(function(flattened, arr) {
return flattened.concat(arr);
}, [])
.filter(function(a) {
return a.cityId === cityId;
});
areasInCity.forEach(function(a) {
var option = document.createElement('option');
option.value = a.id;
option.textContent = a.name;
areaSelect.appendChild(option);
});
});
</script>
</body>
</html>
```
这个js实现了一个简单的移动端收货地址下拉框,其中省份、城市和区县的数据都是硬编码在js中的,你需要根据你的实际情况去替换这些数据。