利用JS进行省市选择的实现

<html>
<head>
<title>省市</title>
<script language="javascript" type="text/javascript">
var data={"四川":["成都","巴中"],"重庆":["永川","万州"]};
function loadProv()
{
///遍历省
var prov=document.getElementById("prov");
for(var key in data){
var option=document.createElement("option");
option.value=key;
option.innerText=key;
prov.appendChild(option);
}
}
///市操作;
function provchange()
{
var prov=document.getElementById("prov");
var city=document.getElementById("city");
///获取选中项的省名;
var provName=prov.value;
if(provName=="none"){

for(var i=city.childNodes.length-1;i>=0;i--){
var option=city.childNodes[i];///获取第一个节点的value;
city.removeChild(option);
}
var citis=data[provName];///取出相关的市;即:获取相关的value;
for(var i=0;i<citis.length;i++){
var option=document.createElement("option");
option.value=citis[i];
option.innerText=citis[i];
city.appendChild(option);
}
return;
}
///清除旧的市列表数据操作;
//city.option.length=0;
//for(var i=0;i<city.childNodes.length;i++){ ///有问题:当删除一个后,那么后面的向前补齐,那么就会有漏网之鱼;
for(var i=city.childNodes.length-1;i>=0;i--){
var option=city.childNodes[i];///获取第一个节点的value;
city.removeChild(option);
}
var citis=data[provName];///取出相关的市;即:获取相关的value;
for(var i=0;i<citis.length;i++){
var option=document.createElement("option");
option.value=citis[i];
option.innerText=citis[i];
city.appendChild(option);
}
}
</script>
</head>
<body οnlοad="loadProv();">
<select id="prov" οnchange="provchange()">
<option value="none">请选择省</option>
</select>
<br>
<select id="city">
</select>
</body>
</html>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值