JQ的三级联动

时间：11-13来源：作者：点击数：
给你一个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);
    }
方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号
来顶一下
返回首页
上一篇:js千位加逗号下一篇:yarn的安装和使用
Git的安装与卸载详细	Photoshop非常实用的
高速PCB布局布线规范	解决windows+nginx下