标签：case qu 看不懂 innerHTML js break 联动 shi select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM</title>
</head>
<body>
<!-- 三级联动演示：
省：四川，吉林 ， 陕西
市：成都， 绵阳， 达州 ； 长春， 四平， 延边 ； 西安， 安康， 咸阳
区：金牛，武侯，温江；绵1，绵2，绵3；达川，宣汉，大竹；
朝阳，南关，净月；四平1，四平2，四平3；延边1，延边2，延边3
西安1，西安2，西安3；安康1，安康2，安康3；咸阳1，咸阳2，咸阳3-->
<form>
<select id="sheng">
<option>请选择省份</option>
<option>四川</option>
<option>吉林</option>
<option>陕西</option>
</select>
<select id="shi">
<option>请选择市</option>
</select>
<select id="qu">
<option>请选择区</option>
</select>
</form>
<script>
let select_sheng= document.getElementById("sheng");
let select_shi= document.getElementById("shi");
let select_qu= document.getElementById("qu");
select_sheng.onclick=function (){
select_qu.innerHTML="<option>请选择区</option>";
switch (select_sheng.value){
case "四川":
select_shi.innerHTML=" <option>成都</option>\n" +
" <option>绵阳</option>\n" +
" <option>达州</option>";
break;
case "吉林":
select_shi.innerHTML=" <option>长春</option>\n" +
" <option>四平</option>\n" +
" <option>延边</option>";
break;
case "陕西":
select_shi.innerHTML=" <option>西安</option>\n" +
" <option>安康</option>\n" +
" <option>咸阳</option>";
break;
}
}
select_shi.onclick=function (){
switch (select_shi.value){
case "成都":
select_qu.innerHTML=" <option>金牛</option>\n" +
" <option>武侯</option>\n" +
" <option>温江</option>";
break;
case "绵阳":
select_qu.innerHTML=" <option>绵阳1</option>\n" +
" <option>绵阳2</option>\n" +
" <option>绵阳3</option>";
break;
case "达州":
select_qu.innerHTML=" <option>达川</option>\n" +
" <option>宣汉</option>\n" +
" <option>大竹</option>";
break;
case "长春":
select_qu.innerHTML=" <option>朝阳</option>\n" +
" <option>南关</option>\n" +
" <option>净月</option>";
break;
case "四平":
select_qu.innerHTML=" <option>四平1</option>\n" +
" <option>四平2</option>\n" +
" <option>四平3</option>";
break;
case "延边":
select_qu.innerHTML=" <option>延边1</option>\n" +
" <option>延边2</option>\n" +
" <option>延边3</option>";
break;
case "西安":
select_qu.innerHTML=" <option>西安1</option>\n" +
" <option>西安2</option>\n" +
" <option>西安3</option>";
break;
case "安康":
select_qu.innerHTML=" <option>安康1</option>\n" +
" <option>安康2</option>\n" +
" <option>安康3</option>";
break;
case "咸阳":
select_qu.innerHTML=" <option>咸阳1</option>\n" +
" <option>咸阳2</option>\n" +
" <option>咸阳3</option>";
break;
}
}
</script>
</body>
</html>
标签：case,
qu,
看不懂,
innerHTML,
js,
break,
联动,
shi,
select
From： https://www.cnblogs.com/fssnjcl/p/17013459.html