js-案例:省市连动下拉框

时间:2021-11-08 09:14:12
  • 最终效果如下:

js-案例:省市连动下拉框
js-案例:省市连动下拉框
js-案例:省市连动下拉框
js-案例:省市连动下拉框


- 完整代码如下:

<html>
<head>
<style type="text/css">

</style>
<title>Document</title>
</head>
<body>
<select id="country" onchange="add1(this.value);">
<option value="0">请选择··</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
<option value="德国">德国</option>
</select>

<select id="city">

</select>

<script type="text/javascript">
var array=new Array(4);
array[0]=["中国","北京","青岛","德州","天津"];
array[1]=["美国","纽约","华盛顿","底特律","休斯顿"];
array[2]=["日本","大阪","东京","广岛","长崎",];
array[3]=["德国","慕尼黑","柏林","狼堡"];
function add1(value){

var city1=document.getElementById("city");
var option1=city1.getElementsByTagName("option");
for(var t=0;t<option1.length;t++)
{
op2=option1[t];
city1.removeChild(op2);
t--;
}
for(var i=0;i<array.length;i++)
{
var arr=array[i];
var firstvalue=arr[0];
if(arr[0]==value)
{
for(var j=1;j<arr.length;j++)
{
var arr2=arr[j];
var op=document.createElement("option");
var tex1=document.createTextNode(arr2);
op.appendChild(tex1);
city1.appendChild(op);
}
}
}
}

</script>
</body>
</html>