网上能搜到一大堆关于两级联动,三级联动的效果,一般对新手来说很难看懂那些代码。我发个比较易懂 简单的小实例;

HTML:

1
2
3
4
5
6
7
8
9
10
11
<form>
    <select id="sheng" onChange="getCity()">
        <option value="0">请选择所在省</option>
        <option value="直辖市">直辖市</option>
        <option value="北京">北京</option>
        <option value="河南">河南</option>
    </select>
    <select id="shi">
        <option value="0">请选择所在市</option>
    </select>
</form>

javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var arrCity=[
        ['北京','上海','南京'],
        ['昌平','海淀','朝阳',],
        ['郑州','开封','周口'],
    ];
     
     
function getCity(){
     
    var oSheng=document.getElementById('sheng');
    var oShi=document.getElementById('shi');
     
    var popshi=arrCity[sheng.selectedIndex-1];
    oShi.length=1;
     
    for(var i=0;i<popshi.length;i++){
        oShi[i+1]=new Option(popshi[i],popshi[i]);
    }
         
}