zoukankan      html  css  js  c++  java
  • jq三级联动

    test.html           
        
              <
    div class="a_list"> <div class="a_title">商城分类:</div> <div class="a_i">*</div> <select style="margin-left: 20px" id="s_fenlei" name="s_fenlei" class="a_bendian"> <option value="">-请选择-</option> {volist name='s_fenlei' id='s_fenlei'} <option value="{$s_fenlei.id}">{$s_fenlei.name}</option> {/volist} </select> <select id="s_fenlei1" name="s_fenlei1" class="a_bendian"> <option>-请选择-</option> </select> <select id="s_fenlei2" name="s_fenlei2" class="a_bendian"> <option>-请选择-</option> </select> </div>
    test.js
    //商城分类三级联动
            $("#s_fenlei").change(function () {
    
                var fenlei = $('#s_fenlei').val();
                if(fenlei==""){
                    $("#pinpai").hide();
                }else{
                    $("#pinpai").show();
                }
                var list = '<option value="">-请选择-</option>';
                var list1 = '<option value="">-请选择-</option>';
                $.ajax({
                    url:"{:url('sgetfenlei')}",
                    data:{b_fen:fenlei},
                    type:'POST',
                    datatype:'TEXT',
                    success:function (d) {
                        //组成二级分类的select
                        if(d.data.pinpai.length==0){
    
                            $("#s_fenlei1").hide();
                            return false;
                        }else {
                            $("#s_fenlei1").show();
                            for(var i=0;i<d.data.fenlei2.length;i++){
                                list1 = list1+"<option value='"+d.data.fenlei2[i].id+"'>"+d.data.fenlei2[i].name+"</option>";
                            }
                            $("#s_fenlei1").html(list1);
    
                        }
                        //组成品牌的select
                        if(d.data.pinpai.length==0){
    
                            $("#pinpai").hide();
                            return false;
                        }
                        for(var i=0;i<d.data.pinpai.length;i++){
                            list = list+"<option value='"+d.data.pinpai[i].brand_id+"'>"+d.data.pinpai[i].name+"</option>";
                        }
                        $("#brand").html(list);
                    }
                });
            });
            $("#s_fenlei1").change(function () {
                var fenlei = $('#s_fenlei1').val();
                var list1 = '<option value="">-请选择-</option>';
                $.ajax({
                    url:"{:url('sgetfenlei')}",
                    data:{b_fen:fenlei},
                    type:'POST',
                    datatype:'TEXT',
                    success:function (d) {
                        console.log(d);
                        if(d.data.pinpai.length==0){
    
                            $("#s_fenlei2").hide();
                            return false;
                        }else {
                            $("#s_fenlei2").show();
                            for(var i=0;i<d.data.fenlei2.length;i++){
                                list1 = list1+"<option value='"+d.data.fenlei2[i].id+"'>"+d.data.fenlei2[i].name+"</option>";
                            }
                            $("#s_fenlei2").html(list1);
    
                        }
                    }
                });
            });
  • 相关阅读:
    ssh无密码登录设置方法以及出现问题 ECDSA host key 和IP地址对应的key不同的解决
    asp.net core 3 Swagger 添加 Authorization [Bearer token]
    asp.net core3 发布到IIS
    asp.net core 3.1 使用log4net
    asp.net core 3 跨域
    解决'vue' 不是内部或外部命令,也不是可运行的程序 或批处理文件的方法
    ReSharper 安装没有提示功能
    Python3 安装MySQL驱动
    win10 安装 Python 和 pip 详解
    Win10下 80端口被system(pid=4)占用的解决方法
  • 原文地址:https://www.cnblogs.com/shark1100913/p/9165677.html
Copyright © 2011-2022 走看看