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

来源：互联网发布：怎么找到淘宝客服人工编辑：程序博客网时间：2024/05/08 13:40

<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 onload="loadProv();">
<select id="prov" onchange="provchange()">
<option value="none">请选择省</option>
</select>
<br>
<select id="city">
</select>
</body>
</html>