zoukankan      html  css  js  c++  java
  • 二级菜单联动效果

    1. [代码]jsp页面     
    <tr>
                                    <td align="right" style=" 70px;">一级分类:</td>
                                    <td>
                                        <select id="cateOne" name="cateOne" onchange="changeCate();">
                                            <option value="0">---请选择----</option>
                                              
                                                        <option value="1">一级父菜单</option>
                                                     
                                                        <option value="2">二级父菜单</option>
                                                     
                                                        <option value="3">三级父菜单</option>
                                                     
                                                        <option value="4">四级父菜单</option>
                                                     
                                                        <option value="5">五级父菜单</option>
                                                     
                                                 </c:if>
                                        </select>
                                    </td>
                                 
                                 
                                </tr>
                                <tr height="35">
                                    <td align="right" style=" 70px;">二级类别:</td>
                                    <td>
                                        <select id="cateTwo" name="cateTwo" >
                                            <option value="0">---请选择----</option>
                                        </select>
                                         
                                    </td>
                                </tr>

    ​2. [代码]js     
    //类别级联
    function changeCate(){
        var  cateOne = $("#cateOne").find("option:selected").val();
        if(cateOne == 0) {春天图片
             $("#cateTwo").empty().append("<option value='0'>---请选择----</option>");
            return false;http://www.5idesk.com/s/chuntian/​
        }
        $.ajax({
            url:'<%=path%>/admin/menu_select',
            type:"post",
            dataType:"json",    
            data: {
                'ids' : cateOne
            },
          success: function (data) {
               $("#cateTwo").empty().append("<option value='0'>---请选择----</option>");
                for(var i=0,len=data.length;i<len;i++)
                {
                    $("#cateTwo").append($("<option value='"+data[i].id+"'>"+data[i].name+"</option>")); 
                }
                
          }
         }); 
    }

  • 相关阅读:
    Go语言入门系列(三)之数组和切片
    详解Java的对象创建
    Go语言入门系列(二)之基础语法总结
    Go语言入门系列(一)之Go的安装和使用
    SpringCloud--Ribbon--配置详解
    自己动手作图深入理解二叉树、满二叉树及完全二叉树
    自已动手作图搞清楚AVL树
    《RabbitMQ》什么是死信队列
    《RabbitMQ》如何保证消息不被重复消费
    《RabbitMQ》如何保证消息的可靠性
  • 原文地址:https://www.cnblogs.com/xkzy/p/4486027.html
Copyright © 2011-2022 走看看