使用javaScript实现省市级联效果 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市级联</title>

<script type="text/javascript">

    // 声明数组
    var cityList = new Array();
    
    // 为arr数组赋值
    cityList['浙江省'] = ['杭州市','温州市','衢州市','台州市'];
    cityList['江苏省'] = ['南京市','苏州'];
    cityList['安徽省'] = ['合肥市','蚌埠','黄山','阜阳'];
    cityList['江西省'] = ['南昌市','上饶'];
    cityList['黑龙江省'] = ['哈尔滨市','佳木斯','龙江'];
    
    // 循环遍历
    for(var i in cityList)
    {
        for(var j in cityList[i])
        {
            //alert(arr[i][j]);
            }
    }
    // 默认将数组的下标(所有省份)绑定到显示省份的下拉列表框中
    function allCity()
    {
        // 获取显示省份的下拉列表框对象
        var sheng = document.getElementById("sheng");
        
        // 循环数组,将每个下标添加到下拉列表框中作为项显示
        for(var i in cityList)
        {
            // 每次循环添加一个新的项到下拉列表框中
            // 第一个参数是要添加的项>>>括号中第一个值是显示值>>>第二个值是实际值
            // 第二个参数是要将该项添加到哪一项的前面
            sheng.add(new Option(i,i),null);
        }
    }
    
    // 每当改变省份下拉列表中的项的值时,调用该方法,重新绑定城市下拉列表中的项
    function changeCity()
    {
        // 获取省份和城市下拉列表框的对象
        var sheng = document.getElementById("sheng").value;
        var city = document.getElementById("city");
        
        // 清空城市列表中的项
        city.options.length = 0;
        
        // 循环省市数组
        for(var i in cityList)
        {
            // 获取与选中省份相同的下标
            if(i == sheng)
            {
                // 循环当前下标的内容的集合
                for(var j in cityList[i])
                {
                    // 向城市列表中添加获取到的指定城市项
                    city.add(new Option(cityList[i][j],cityList[i][j]),null);
                }
            }
        }
        // 如果没有选择省份
        if(sheng == '--请选择--')
        {
            // 城市绑定请选择
            city.add(new Option('--请选择--','--请选择--'),null);
        }
        
    }
    
    
    // 窗体加载时调用allCity方法
    window.onload = allCity;
</script>
</head>

<body>

    地址:
    <select id="sheng" onchange="changeCity()">
        <option>--请选择--</option>
    </select>
    <select id="city">
        <option>--请选择--</option>
    </select>
</body>
</html>

 

posted on 2017-03-18 23:13  小尹有个小小梦想  阅读(504)  评论(0)    收藏  举报

导航