三级联动
<div>
省:<select style="width: 100px;" id="sheng" onchange="Select1()"><option value="-1">-请选择-</option></select>
市:<select style="width: 100px;" id="shi" onchange="Select2()"></select>
区:<select style="width: 100px;" id="xain"></select>
</div>
<script>
var sheng1=["北京市","上海市","天津市"];
var shi1=[
["朝阳区 ","东城区" ,"西城区"],
["黄埔区","杨浦区","浦东新区"],
["和平区","河东区","河西区"]
];
var xain1=[
[
["朝阳1","朝阳2","朝阳3"],
["东城1","东城2","东城3"],
["西城1","西城2","西城3"]
],
[
["黄埔1","黄埔2","黄埔3"],
["杨浦1","杨浦2","杨浦3"],
["浦东新1","浦东新2","浦东新3"]
],
[
["和平1","和平2","和平3"],
["河东1","河东2","河东3"],
["河西1","河西2","河西3"]
]
];
var Sheng=document.getElementById("sheng");
var Shi=document.getElementById("shi");
var Xian=document.getElementById("xain");
for(let i=0;i<sheng1.length;i++)
{
var op=new Option(sheng1[i],i);
Sheng.options.add(op);
}
function Select1(){
DeleteShi();
DeleteXian();
a=Sheng.selectedIndex;
AddShi(a);
AddXina(a,0);
}//选择省
function Select2(){
DeleteXian();
b=Shi.selectedIndex;
AddXina(a,b);
}//选择市
function AddShi(a){
for(let i=0;i<shi1.length;i++)
{
var op=new Option(shi1[a-1][i],i);
Shi.options.add(op);
}
}//增加市
function AddXina(a,b){
for(let i=0;i<xain1.length;i++)
{
var op=new Option(xain1[a-1][b][i],i);
Xian.options.add(op);
}
}//增加区
function DeleteShi(){
Shi.options.length=0;
}//清空市
function DeleteXian(){
Xian.options.length=0;
}//清空区
</script>