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中有几种方法实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
    java的5个框架,哪个框架更适合你的项目?
    java的热门应用有哪些?
    vue-router 切换页面时怎么设置过渡动画
    Referrer Policy 介绍
    await进行同步操作
    vue中axios拦截器同一项目多域名如何配置
    正规方程求解特征参数的推导过程
    一种网页中显示代码所涉及的字符转义问题的解决方案
  • 原文地址:https://www.cnblogs.com/somesayss/p/2598112.html
Copyright © 2011-2022 走看看