JS实现省市二级联动 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>实现省市二级联动</title>
<script>
//思路： 找对象  找事件 实现相应的事件处理程序
var province = ['请选择','广东省','湖南省','湖北省'];
var city = [[],['广州市','深圳市','东莞市'],['长沙','株洲','湘潭'],['武汉市','咸宁市','天门市']];

//获取DOM对象
function $(id)
{
    return document.getElementById(id);
}

//获取（遍历）省下拉列表
function createProvince()
{
    
    for(var i = 0;i<province.length;i++)
    {
        var op = new Option(province[i],province[i]);
        $('province').options.add(op);
    }
}

//获取（遍历）市下拉列表
function createCity()
{
    //获取被选中的省索引
    var index = $('province').selectedIndex;
    //清空下拉列表
    $('city').length = 0;
    for(var i = 0;i < city[index].length;i++)
    {
        var op = new Option(city[index][i],city[index][i]);
        $('city').options.add(op);
    }
}

window.onload = function()
{
    createProvince();
    //状态改变事件
    $('province').onchange = createCity;
}
</script>

</head>
<body>
省：<select id='province'></select>
市：<select id='city'></select>
</body>
</html>

 

posted @ 2015-10-08 12:13  lesuso  阅读(283)  评论(0)    收藏  举报