js的二级联动 

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta content="always" name="referrer">
        <meta name="theme-color" content="#2932e1">
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>  
<body>  
        <select  id="province" >
        <option value="">省份</option>
        option          
        </select>  
        <select name="city" id="city">
        <option value="">地区</option>          
        </select>  
<script type="text/javascript">  
        var prva =new Array(['1','北京','0'],['2','河北','0'],['3','天津','0'],['4','朝阳','1'],['5','海淀','1'],['6','石家庄','2'],['7','邯郸','2'],['8','静海','3'],['9','谷开','3']);
        /*loadprva('province'); 
        function loadprva(id){
                var province = document.getElementById(id);  
                for(var i=0;i<prva.length;i++){
                        if(prva[i][2]==0){
                        province.options[province.length]=new Option(prva[i][1],prva[i][2]);
                        }
                }
                province.onchange = function() {  
                loadCity(this,'city');  
                } 
        }
        function loadCity(obj,id){
                var obj1=document.getElementById(id);
                var index=obj.selectedIndex;
                obj1.length=1;
                for(var j=0;j<prva.length;j++){
                        if(prva[j][2]==index&&index!=0){
                        obj1.options[obj1.length]=new Option(prva[j][1],prva[j][2]);
                        }
                }
        }*/
        var prv=$("#province");
        var city=$("#city");
        $.each(prva,function(i,item){
               if(item[2]==0){
                        prv.append("<option value='新增'>"+item[1]+"</option>");
                        } 
        })
        prv.change(function(){
                var p=$("#province option:selected").index();
                $('#city option').eq(0).siblings().remove();
                $.each(prva,function(i,item){
                        if(item[2]==p){
                                city.append('<option value="x">'+item[1]+"</option>");
                        }
                })
        })
</script>    
</body>
</html>

 



posted @ 2016-03-09 15:53  honely1314  阅读(213)  评论(0)    收藏  举报