JQuery 实现级联下拉菜单

最新推荐文章于 2021-11-11 23:49:19 发布

weixin_34050389

最新推荐文章于 2021-11-11 23:49:19 发布

阅读量216

点赞数

文章标签： javascript java python ViewUI

原文链接：https://my.oschina.net/shaonan/blog/552615

版权

2019独角兽企业重金招聘Python工程师标准>>>

Java代码收藏代码

function show_hnbInfo()  
{  
    var ss = Math.random();  
    $.ajax(  
    {  
        type : 'POST',  
        url : 'getAllHnbInfo',  
        data : 'id=' + ss,  
        success : function(msg)  
        {  
            // 清空表格  
            $("#internetID").empty();  
              
            // 转换成json对象  
            var data = JSON.parse(msg);  
              
            var option = "<option value=\"\">请选择...</option>";  
              
            // 循环组装下拉框选项  
            $.each(data, function(k, v)  
            {  
                option += "<option value=\"" + v['internetID'] + "\">" + v['hnbName'] + "</option>";  
            });  
            $("#internetID").append(option);  
            $("#internetID").change(function()  
            {  
                show_freqHnbInfo($(this).val());  
            });  
        },  
        error : function(msg, textStatus, e)  
        {  
            alert("当前登录用户失效，请重新登录。");  
            window.location = path + "/login.jsp";  
        }  
    });  
}

上面是1级下拉列表框的实现，下面是二级下拉列表框的实现。

Java代码收藏代码

function show_freqHnbInfo(internetId)  
{  
    var ss = Math.random();  
    $.ajax(  
    {  
        type : 'POST',  
        url : 'getAllHnbOnlineOutByOne',  
        data : 'id=' + ss + '&internetId=' + internetId,  
        success : function(msg)  
        {  
            // 清空表格  
            $("#internetId").empty();  
              
            // 转换成json对象  
            var data = JSON.parse(msg);  
              
            var option = "";  
              
            // 循环组装下拉框选项  
            $.each(data, function(k, v)  
            {  
                option += "<option value=\"" + v['internetID'] + "\">" + v['hnbName'] + "</option>";  
            });  
              
            if (internetId == "" || internetId == null || internetId == undefined)  
            {  
                option += "<option value=\"\">请选择...</option>";  
            }  
              
            $("#internetId").append(option);  
              
        },  
        error : function(msg, textStatus, e)  
        {  
            alert("当前登录用户失效，请重新登录。");  
            window.location = path + "/login.jsp";  
        }  
    });  
}

JSP代码实现：

Java代码收藏代码

<script type="text/javascript" src="${pageContext.request.contextPath}/script/config/freqCell.js"></script>  
<script type="text/javascript">  
    var type = "${type }";  
    var path = "${pageContext.request.contextPath}";  
    show_hnbInfo();  
    show_freqHnbInfos();  
</script>  
  
<table width="60%" border="0" align="center" cellpadding="0" cellspacing="0" class="borderquan">  
  <tr>  
    <td width="25%" height="30" align="center" class="borderbottomright">基站名称</td>  
    <td width="75%" class="borderbottom"><label>  
        <select name="internetID" id="internetID" style="width:318px">  
            <option value="">请选择...</option>  
        </select>  
      <FONT SIZE="" COLOR="red">*</FONT>  
      <input type="hidden" name="type" id="type" value="${type }">  
      <span id="staError" style="font-size: 9pt; font-family: 黑体; color: red"></span>  
    </label></td>  
  </tr>  
  <tr>  
    <td width="25%" height="30" align="center" class="borderbottomright"><c:if test="${type=='intra' }">同频</c:if><c:if test="${type=='inter' }">异频</c:if>邻基站名称</td>  
    <td width="75%" class="borderbottom"><label>  
      <select name="internetId" id="internetId" style="width:318px">  
            <option value="">请选择...</option>  
        </select>  
      <FONT SIZE="" COLOR="red">*</FONT>  
      <span id="staErrors" style="font-size: 9pt; font-family: 黑体; color: red"></span>  
    </label></td>  
  </tr>  
  <tr>  
    <td height="30" colspan="2" align="center">  
      <input type="button" name="save" class="myBtn" value="保　存" onclick="submitForm();" />  
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
      <input type="button" name="backtrack" class="myBtn" value="返　回" onclick="goback();"/>  
    </td>  
  </tr>  
</table>

后台代码：

controller代码

Java代码收藏代码

 @RequestMapping("/getAllHnbInfo")  
    public void getAllHnbByJosn(HttpServletRequest request, HttpServletResponse response)  
    {  
        PrintWriter out = null;  
        try  
        {  
            // 设置输出格式  
            response.setContentType("text/html");  
              
            // 页面输出对象  
            out = response.getWriter();  
            out.write(hnbService.getAllHnbByJosn());  
            out.flush();  
            out.close();  
              
        }  
        catch (Exception e)  
        {  
            logger.error(Global.LOG_EXCEPTION_NAME, e);  
            if (null != out)  
            {  
                out.write("[]");  
                out.flush();  
                out.close();  
            }  
        }  
    }  
      
    /** 
     * <获取所有基站名称和基站标识返回josn串> 
     * <功能详细描述> 
     * @param request 
     * @return 
     * @see [类、类#方法、类#成员] 
     */  
    @RequestMapping("/getAllHnbOnlineOutByOne")  
    public void getAllHnbOnlineOutByOne(HttpServletRequest request, HttpServletResponse response)  
    {  
        PrintWriter out = null;  
        try  
        {  
            String internetId = request.getParameter("internetId");  
              
            // 设置输出格式  
            response.setContentType("text/html");  
              
            // 页面输出对象  
            out = response.getWriter();  
            out.write(hnbService.getAllHnbOnlineOutByOne(internetId));  
            out.flush();  
            out.close();  
              
        }  
        catch (Exception e)  
        {  
            logger.error(Global.LOG_EXCEPTION_NAME, e);  
            if (null != out)  
            {  
                out.write("[]");  
                out.flush();  
                out.close();  
            }  
        }  
    }  
}

service代码：

Java代码收藏代码

@Override  
    public String getAllHnbByJosn()  
    {  
        List<HnbInfo> hnbList = getHnbOnlineList();  
        if (null != hnbList)  
        {  
            StringBuffer sb = new StringBuffer();  
            sb.append("[");  
              
            //得到集合的长度  
            int size = hnbList.size();  
            int i = 0;  
              
            for (HnbInfo hnbInfo : hnbList)  
            {  
                i++;  
                  
                String internetID = hnbInfo.getInternetID();  
                String hnbIdentifier = hnbInfo.getHnbIdentifier();  
                String hnbName = hnbInfo.getHnbName();  
                  
                sb.append("{\"internetID\":\"");  
                sb.append(internetID);  
                sb.append("\",\"hnbIdentifier\":\"");  
                sb.append(hnbIdentifier);  
                sb.append("\",\"hnbName\":\"");  
                sb.append(hnbName);  
                sb.append("\"}");  
                  
                //如果i小于size字符串sb中加","  
                if (i < size)  
                {  
                    sb.append(",");  
                }  
            }  
              
            sb.append("]");  
              
            //拼好的字符串赋值给变量  
            return sb.toString();  
        }  
        else  
        {  
            return "[]";  
        }  
    }  
  
  
 @Override  
    public String getAllHnbOnlineOutByOne(String internetId)  
    {  
        // 根据基站ID 获取基站信息  
        InternetGatewayDevice internet = hnbDao.getOneHnbByInternetID(internetId);  
        if (null != internet && !Global.isEmpty(internet.getApIpAdress()))  
        {  
            // 根据基站注册IP地址获取所有除基站注册IP地址对应的基站外的所有基站  
            List<HnbInfo> hnblist = getAllHnbOutByone(internet.getApIpAdress());  
            if (null != hnblist && hnblist.size() != 0)  
            {  
                StringBuffer sb = new StringBuffer();  
                sb.append("[");  
                  
                //得到集合的长度  
                int size = hnblist.size();  
                int i = 0;  
                  
                for (HnbInfo hnbInfo : hnblist)  
                {  
                    i++;  
                      
                    String internetID = hnbInfo.getInternetID();  
                    String hnbIdentifier = hnbInfo.getHnbIdentifier();  
                    String hnbName = hnbInfo.getHnbName();  
                      
                    sb.append("{\"internetID\":\"");  
                    sb.append(internetID);  
                    sb.append("\",\"hnbIdentifier\":\"");  
                    sb.append(hnbIdentifier);  
                    sb.append("\",\"hnbName\":\"");  
                    sb.append(hnbName);  
                    sb.append("\"}");  
                      
                    //如果i小于size字符串sb中加","  
                    if (i < size)  
                    {  
                        sb.append(",");  
                    }  
                }  
                  
                sb.append("]");  
                  
                //拼好的字符串赋值给变量  
                return sb.toString();  
            }  
            else  
            {  
                return "[]";  
            }  
        }  
        else  
        {  
            return "[]";  
        }  
    }

转载于:https://my.oschina.net/shaonan/blog/552615