zoukankan      html  css  js  c++  java
  • JQ_3级联动

    /*JQ*/

    var arr = {
        "选着省":{
            "选着市":["选着区"]
            },
        "浙江省":{
            "杭州市":["上城区","下城区","西湖区","拱墅区","江干区","滨江区"],
            "宁波市":["海曙","江东","江北","鄞州","镇海","北仑"]
            },
        "江苏省":{
            "南京市":["南A","南B","南C","南D","南E"],
            "苏州市":["苏A","苏B","苏C","苏D","苏E"]
            },
        "上海市":{
            "黄浦区":null,
            "徐汇区":null
            }
        };
    var myHome = function(a,b,c){
        this.pare = $(a);
        this.city = $(b);
        this.area = $(c);
        this.base();
        }
    myHome.prototype = {
        base:function(){
            this.star();
            this.opcl();
            },
        star:function(){
            var _pare = this.pare,_city = this.city, _area = this.area;
            _city.html("<option>选着市</option>");
            _area.html("<option>选着区</option>");
            for(var i in arr){
                _pare.append("<option>"+ i +"</option>")
                }
            _city.attr("disabled","disabled");
            _area.attr("disabled","disabled");
            },
        opcl:function(){
            var _pare = this.pare,_city = this.city, _area = this.area,keyPar = null,keyCity = null;
            _pare.find("option").click(function(){
                _city.removeAttr("disabled");
                _area.removeAttr("disabled");
                _area.show();
                _city.html("");
                _area.html("");
                keyPar = $(this).html();
                if(keyPar == "选着省"){
                    _city.attr("disabled","disabled");
                    _area.attr("disabled","disabled");
                    }
                for(var i in arr[keyPar]){
                    _city.append("<option>"+ i +"</option>")
                    }
                for(var i in arr[keyPar]){
                    if(arr[keyPar][i]==null){
                        _area.hide();
                        break;
                        }
                    for(var y=0; y<arr[keyPar][i].length; y++){
                        _area.append("<option>"+ arr[keyPar][i][y] +"</option>")
                        }
                    break;
                    }
                _city.find("option").click(function(){
                    keyCity = $(this).html();
                   _area.html("")
                if(arr[keyPar][keyCity]==null){return}
                    for(var i=0; i<arr[keyPar][keyCity].length; i++){
                        _area.append("<option>"+ arr[keyPar][keyCity][i] +"</option>")
                        }
                    })
                })    
            }
        }
    new myHome("#myPare","#myCity","#myArea");

    /*html*/

    <select id="myPare"></select>
    <select id="myCity"></select>
    <select id="myArea"></select>

  • 相关阅读:
    面向对象(二)之三大特性
    面向对象(一)之类和对象
    java基础知识(三)之数组
    Java基础知识(二)之控制语句
    java基础知识(一)之数据类型和运算符
    事件模型
    AWT和布局管理器
    选择器
    颜色值与长度
    排版与缩写
  • 原文地址:https://www.cnblogs.com/somesayss/p/2598112.html
Copyright © 2011-2022 走看看