利用对象的哈希特性制作的二级联动下拉列表框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>

 <body>
        <p>省：<select id="provinceCbo"></select></p>
        <p>市：<select id="cityCbo"></select></p>
 </body>
</html>
<script type="text/javascript">
<!--
    function $(id){
        return document.getElementById(id);
    }
    document.body.onload=function(){
        //原始数据,这段文字无论是从后台取还是放在前台都比较容易维护
        var dataString="北京:海淀,西城,崇文,丰台;辽宁:大连,沈阳,铁岭;湖南:长沙,株洲,湘潭,衡阳,岳阳";
        var arr1=dataString.split(";");

        // 从dataString给datum填值
        var datum = {};// var datum=new Array();亦可
        for(var i=0,n=arr1.length;i<n;i++){
            var arr2=arr1[i].split(":");
            var key=arr2[0];
            var value=arr2[1].split(",");

            datum[key]=value;
        }

        // datum的具体数据
        //var datum = {
        //    '北京': ['海淀','西城','崇文','丰台'],
        //    '辽宁': ['大连','沈阳','铁岭'],
        //    '湖南': ['长沙','株洲','湘潭','衡阳','岳阳']
        //};

        // 省下拉列表框填值
        var provinceCbo=$("provinceCbo");
        for(var key in datum){
            var newOption=new Option;
            newOption.value=key;
            newOption.text=key;
            provinceCbo.add(newOption);
        }

        // 市下拉列表框填值
        var cityCbo=$("cityCbo");
        var arr=datum[provinceCbo.value];
        for(var i=0,n=arr.length;i<n;i++){
            var newOption=new Option;
            newOption.value=arr[i];
            newOption.text=arr[i];
            cityCbo.add(newOption);
        }

        // 省发生变化时联动
        provinceCbo.onchange=function(){
            var province=this.value;
            
            for(var i=cityCbo.options.length-1;i>=0;i--){
                cityCbo.remove(i);
            }

            var arr=datum[province];
            for(var i=0,n=arr.length;i<n;i++){
                var newOption=new Option;
                newOption.value=arr[i];
                newOption.text=arr[i];
                cityCbo.add(newOption);
            }
        };
    }
//-->
</script>

posted @ 2012-12-19 15:34  alxe_yu  阅读(105)  评论(0)    收藏  举报