zoukankan      html  css  js  c++  java

  • 三级联动

    给你一个JQ的三级联动：
    <!doctype html>
    <html>
        <head>
            <title></title>
            <meta charset = "utf-8"/>
    </head>
    <style>
         
    </style>
    <body>
     
    <select id="one">
        <option value="">请选择省份</option>       
    </select>
     
    <select id="two">
        <option value="">请选择城市</option>
    </select>
     
    <select id="three">
        <option value="">请选择区域</option>
    </select>
         
    <script type="text/javascript" src="js/jquery-1.12.0.js"></script>
    <script type="text/javascript">
        /*
            1.搭建框架
            2.给省份和城市绑定change事件
                     
                 
        */
     
    $(function(){
        var province = [
            {"name" : "广东省" ,
                "city" : [
                    {
                        "name" : "广州市" ,
                        "area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]
                    },
                    {
                        "name" : "深圳市" ,
                        "area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
                    }
                ]
            },
            {"name" : "浙江省" ,
                "city" : [
                    {
                        "name" : "杭州市" ,
                        "area" : ["上城区","下城区","江干区","西湖区"]
                    },
                    {
                        "name" : "丽水" ,
                        "area" : ["莲都区","松阳县","遂昌县","云和县"]
                    }
                ]
            },
            {"name" : "江西省" ,
                "city" : [
                    {
                        "name" : "南昌市" ,
                        "area" : ["东湖区","西湖区","青云谱区","湾里区"]
                    },
                    {
                        "name" : "九江市" ,
                        "area" : ["浔阳区","庐山区","瑞昌市","九江县"]
                    },
                    {
                        "name" : "赣州市" ,
                        "area" : ["章贡区","南康区","上犹县","赣县"]
                    }
                ]
            },
        ];
     
        // 二级联动
        $("#two").change(function(){
            var one_index = $("#one option:selected").index();
            var two_index = $("#two option:selected").index();
            var three = $("#three");
            three.empty().append("<option>请选择区域</option>");
     
            if(two_index > 0){
                var area = province[one_index-1].city[two_index-1].area;
                for(var i = 0 ; i < area.length ; i++){
                    three.append("<option>"+area[i]+"</option>");
                }
            }
        });
     
        // 一级联动
        $("#one").change(function(){
            var one_index = $("#one option:selected").index();
            var two = $("#two");
                console.log(one_index)
            two.empty().append("<option>请选择城市</option>");
            $("#three").empty().append("<option>请选择区域</option>");//清除
     
            if(one_index > 0){
                var city = province[one_index-1].city;
                console.log(province[one_index-1].city)
                for(var i = 0 ; i < city.length ; i++){
                    two.append("<option>"+city[i].name+"</option>");
                }
            }
        });
     
         
        init();
        function init(){
            for(var i = 0 ; i < province.length ; i++){
                $("#one").append("<option>"+province[i].name+"</option>");
            }
        }
    });
    </script>
    </body>
    </html>
     
    ajax实现联动
     
     
    $("#media").change(function(){
        var media_id = $("#media").val();
        $.ajax({
            type:"post",
            url:"{:url('Mediarefund/ajax_media_product')}",
            data: {media_id: media_id},
            dataType:"json",
            success:function(data){
               var option = "<option value='' disabled selected>请选择</option>";
                if(data){
                    $.each(data,function(i,result){
                        option += "<option value='"+result["id"]+"'>"+result["product_name"]+"</option>";
                    })
                }
                $("#product_name").html(option);
                $("#frame_name").val("请选择");
            }
        });          
    });
    $("#product_name").change(function(){
        var product_id = $("#product_name").val();
        $.ajax({
            type:"post",
            url:"{:url('Mediarefund/ajax_frame')}",
            data: {product_id: product_id},
            dataType:"json",
            success:function(data){
               var option = "<option value='' disabled selected>请选择</option>";
                if(data){
                    $.each(data,function(i,result){
                        option += "<option value='"+result["id"]+"'>"+result["frame"]+"</option>";
                    })
                }
                $("#frame_name").html(option);   
            }
        });          
    });
     //查询出该框架对应的媒体收款信息
     function chage_ajax_bank_info(){
        var service_type = $("#service_type").val();
        var frame_id = $("#frame_name").val();
        var bank = document.getElementById("bank");
        var bank_card = document.getElementById("bank_card");
        var account = document.getElementById("account");
        var bank_type = document.getElementById("bank_type");
        var refund_bank_type = document.getElementById("refund_bank_type");
        if(service_type ==2){
          
            $.ajax({
                type:"post",
                url:"{:url('Mediarefund/ajax_bank_info')}",
                data: {frame_id: frame_id},
                dataType:"json",
                success:function(data){
                    if(data){
                        bank.style.display="";
                        bank_card.style.display="";
                        account.style.display="";
                        bank_type.style.display="";
                        document.getElementById("refund_bank").value=data.bank;
                        document.getElementById("refund_bank_account_opening").value=data.account;
                        document.getElementById("refund_bank_card_number").value=data.bank_id;
                        data.account_type = data.account_type+1;
                         for(var i=0;i<refund_bank_type.options.length;i++){
                           if(data.account_type==refund_bank_type.options[i].value){
                                  refund_bank_type.options[i].selected = 'selected';
                                    break;
                             }
                          }
                       
                    }
                }
            });         
        }else{
            bank.style.display="none";
            bank_card.style.display="none";
            account.style.display="none";
            bank_type.style.display="none";
        }
    };
     
     /**
         * ajax获取框架信息
         *
        */
       public function ajax_frame()
        {
             $service_id = cmf_get_current_admin_id();
             $param = $this->request->param();
             $product_id = $param['product_id'];
             //$media_name = Db::name('media_class')->where('id',$media_id)->find();
            if($product_id!=""){
                 $product_frame = Db::name('media')
                                 ->alias('m')
                                 ->where('product_line',$product_id)
                                 ->where('service_id',$service_id)
                                 ->field('m.id,m.frame')
                                 ->select();
            }
             return json($product_frame);
        }
  • 相关阅读:
    vue使用百度编辑器ueditor踩坑记录
    vue项目之webpack打包静态资源路径不准确
    用自己电脑做网站服务器
    telnet测试端口号
    mongodb,redis,mysql的区别和具体应用场景
    移动应用调试之Inspect远程调试
    @vue/cli 3配置文件vue.config.js
    vue+webpack多个项目共用组件动态打包单个项目
    koa/koa2项目搭建
    用Navicat复制数据库到本地（导入.sql文件运行）
  • 原文地址：https://www.cnblogs.com/llzhang123/p/9121286.html
Copyright © 2011-2022 走看看