功能描述：
- 在页面选择省时， 市和区的下拉列表会相应改变为和省相关的地区
- 在页面选择市时， 区的下拉列表会相应的改变为和省、市相关地区
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三级浮动</title>
</head>
<body>
<div id="all">
<div id="left">
<dl style="float: left;margin-left: 150px;padding-left: 150px;">
<dt>
<img src="./gougou.jpg" width="120px"height="150px"/>
</dt>
<dt style="color: red;">账号管理</dt>
</dl>
<dt style="float: left;margin-top: 145px;padding: 20px;margin-left:-180px;">
<ul style="list-style: none;">
<li style="padding-top: 35px;"><a href="#" style="color: #000000;text-decoration: none;">安全设置</a> </li>
<li style="padding-top: 35px;"> <a href="#"style="color: #000000;text-decoration: none;">个人资料</a></li>
<li style="padding-top: 35px;"><a href="#"style="color: #000000;text-decoration: none;">个人成长信息</a> </li>
<li style="padding-top: 35px;"><a href="#"style="color: #000000;text-decoration: none;">支付宝绑定设置</a> </li>
<li style="padding-top: 35px;"><a href="#"style="color: #000000;text-decoration: none;">微信绑定设置</a> </li>
<li style="padding-top: 35px;"><a href="#"style="color: #000000;text-decoration: none;">个人交易信息</a> </li>
<li style="padding-top: 35px;"> <a href="#"style="color: #000000;text-decoration: none;">收货地址</a></li>
<li style="padding-top: 35px;"> <a href="#"style="color: #000000;text-decoration: none;">网站提醒</a></li>
<li style="padding-top: 35px;"> <a href="#"style="color: #000000;text-decoration: none;">旺旺网页版设置</a></li>
<li style="padding-top: 35px;"><a href="#"style="color: #000000;text-decoration: none;">应用授权</a> </li>
<li style="padding-top: 35px;"><a href="#"style="color: #000000;text-decoration: none;">分享绑定</a> </li>
</ul>
</dt>
</div>
</div>
<div id="right">
<table style="float: left;margin-top: 50px;padding-left: 40px; height: 800px;width: 70%;">
<tr style="background-color: honeydew;">
<td colspan="2"><font color="royalblue"style="font-weight: bold;font-size: 25px;">收货地址</font></td>
<tr>
<td style="text-align: center;width: 10%;"><font color="orangered">新增收货地址：</font>
</td>
<td style="text-align: left;" >
<font>
电话号码、手机号选填一项，其余均为必填项
</font>
</td>
</tr>
<tr>
<td style="text-align: center;width: 10%;"><font>所在地区</font><font color="#FF0000">*</font></td>
<td>
<select id="province" style="height: 30px;width:120px;">
<option>请选择省份</option>
</select>
<select id="city"style="height: 30px;width:120px;">
<option>请选择城市</option>
</select>
<select id="area" style="height: 30px;width:120px;">
<option>请选择地区</option>
</select>
</td>
</tr>
<tr>
<td style="text-align: center;width: 10%;"><font style="position: ;">详细地址</font><font color="#FF0000">*</font></td>
<td> <textarea name="introduction" rows="10" cols="80" style="color: lightgray;">建议您如实填写详细收货地址，例如街道名称，门牌号码，楼层和房间号等信息</textarea></td>
</tr>
<tr>
<td style="text-align: center;width: 10%;"><font>邮政编码</font><font color="#FF0000">*</font></td>
<td><input type="text" placeholder="如您不清楚邮递区号，请写000000" style="color: lightgray;height: 30px;width: 230px;" /> </td>
</tr>
<tr>
<td style="text-align: center;width: 10%;"><font>收货人姓名</font><font color="#FF0000">*</font></td>
<td><input type="text" placeholder="长度不超过25个字符" style="color: lightgray;height: 30px;width: 200px;"/> </td>
</tr>
<tr>
<td style="text-align: center;width: 10%;"><font>手机号码</font></td>
<td>
<select style="height: 30px;width:120px;">
<option selected="selected" disabled="disabled">中国大陆+86</option>
<option>港澳台</option>
<option></option>
</select>
<input type="text" placeholder="电话号码、手机号码必须填一项" style="color: lightgray;height: 30px;width: 200px;" /> </td>
</tr>
<tr>
<td style="text-align: center;width: 10%;"><font>电话号码</font></td>
<td>
<select style="height: 30px;width:120px;">
<option selected="selected" disabled="disabled">中国大陆+86</option>
<option>港澳台</option>
<option></option>
</select>
<input type="text" placeholder="区号" style="color: lightgray;height: 30px;width: 90px;" />
<input type="text" placeholder="电话号码" style="color: lightgray;height: 30px;width: 90px;" />
<input type="text" placeholder="分机" style="color: lightgray;height: 30px;width: 90px;" /></td>
</tr>
<tr>
<td colspan="2" style="padding-left: 180px;">
<input type="checkbox" />设置为默认收货地址
</td>
</tr>
<tr style="height: 30px;">
<td colspan="2" style="padding-left: 180px;">
<input type="submit" value="保存" style="background-color: #FF0000;color: white;font-size: 25px;border-color: #FF0000;" />
</td>
</tr>
</table>
</div>
</body>
<script>
// 1.创建三维数组
var provinces=[];
provinces["江苏省"]=["南京市","无锡市","苏州市"];
provinces["浙江省"]=["杭州市","宁波市"];
provinces["安徽省"]=["合肥市","马鞍山市"];
var citys=[];
citys["南京市"]=["玄武区","雨花台区","鼓楼区","秦淮区","六合区"];
citys["无锡市"]=["滨湖区","惠山区","梁溪区"];
citys["苏州市"]=["姑苏区","吴江区"];
citys["杭州市"]=["西湖区","临安区","上城区"];
citys["宁波市"]=["江北区","江东区"];
citys["合肥市"]=["蜀山区","瑶海区"];
citys["马鞍山市"]=["花山区","雨山区"];
// 2.获取元素
var oprovince = document.getElementById('province');
var ocity = document.getElementById('city');
var oarea = document.getElementById('area');
for (province in provinces) {
oprovince.add(new Option(province, province))//省份下拉菜单
}
oprovince.onchange = function () {//省份下拉菜单内容改变时 执行的命令
var selectvalue = oprovince.value;//获取省份下拉菜单的值
ocity.innerHTML = '<option value="">请选择城市</option>';
oarea.innerHTML = ' <option value="">请选择市区</option>';
for (provincename in provinces) {//遍历省份的名称
if (provincename == selectvalue) {
for (cityname in provinces[provincename]) {//遍历城市名称
ocity.add(new Option(provinces[provincename][cityname], provinces[provincename][cityname]));
}
}
}
}
ocity.onchange = function () {
oarea.innerHTML = ' <option value="">请选择市区</option>';
var cityValue = ocity.value;
for (i in citys) {//i是area数组的索引值（城市名称）
if (i == cityValue) {
for (j in citys[i]) {
oarea.add(new Option(citys[i][j], citys[i][j]));
}
}
}
}
// 3.向省份菜单添加选项
for(province in provinces){
oPro.add(new Option(province,province))
}
// 4.根据省份选择城市
oPro.onchange=function(){
var sel_val=oPro.value;//获取选择的省份
oCity.innerHTML = '<option value="">请选择城市......</option>';
oArea.innerHTML = ' <option value="">请选择市区......</option>';
for(province in provinces){
if(province == sel_val){
for(cityname in provinces[province]){
oCity.add(new Option(provinces[province][cityname],provinces[province][cityname]))
}
}
oCity.add(new Option())
}
}
oCity.onchange=function(){
var sel_val2=oCity.value;//获取选择的省份
for(city in citys){
if(province == sel_val){
for(areaname in provinces[province]){
oArea.add(new Option(provinces[province][cityname],provinces[province][cityname]))
}
}
oCity.add(new Option())
}
}
</script>
</html>
效果图：
扫一扫
996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
