ホームページ > 記事 > ウェブフロントエンド > 3層連携を実現するjsコード
3層連携を実現するjsコード
- 不言オリジナル
- 2018-08-23 14:01:251900ブラウズ
この記事の内容はjsで3層連携を実現するためのコードです。お困りの方は参考にしていただければ幸いです。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
省：
<select id="sname">
<option>—请选择—</option>
</select>
市：
<select id="s_city">
<option>—请选择—</option>
</select>
区：
<select id="q_name">
<option>—请选择—</option>
</select>
<script>
var sheng=["陕西省","四川省"];
var city=[
["西安市","渭南市","宝鸡市"],
["成都市","绵阳市"]
]
var qu=[
[
["莲湖区","雁塔区","长安区"],
["渭南1区","渭南2区","渭南3区"],
["成仓区","金台区","高新区"],
],
[
["成都1区","成都2区","成都3区"],
["绵阳1区","绵阳2区","绵阳3区"]
]
] //先获取
var s=document.getElementById("sname");
var s_city=document.getElementById("s_city");
var q_name=document.getElementById("q_name"); //for循环使js里的sheng元素添加到s里
for(var i=0;i<sheng.length;i++)
{
var option=new Option(sheng[i],i);
s.appendChild(option);
} //选择事件
var qucity;
s.onchange=function (){
s_city.options.length=1;
q_name.options.length=1;
var index=this.value;
var shi=city[index];
qucity=qu[index];
for(var i=0;i<shi.length;i++)
{
var option=new Option(shi[i],i);
s_city.appendChild(option)
}
}
s_city.onchange=function (){
q_name.options.length=1;
var index=this.value;
var squ=qucity[index];
for(var i=0;i<squ.length;i++)
{
var option=new Option(squ[i],i);
q_name.appendChild(option);
}
}
</script>
</body>
</html>関連する推奨事項:
js で QR コードを生成するには? QRコード(コード)を生成するjsメソッド
以上が3層連携を実現するjsコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。