`
geeksun
  • 浏览: 950919 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery ajax级联二级菜单

 
阅读更多

需求:

产品营销型网站

上传产品时,有产品种类的选择项,产品种类有一级分类和二级分类,

点击一级分类时,相应显示二级分类的条目。

功能实现:

默认查出一级分类的第一条数据,和一级分类第一条对应的二级分类条目,当选择一级分类的其他条目时,通过ajax查询出数据库中对应的二级分类条目,返回json格式的数据,并显示在二级分类的下拉列表中。

编程实现:

前端页面jsp:

<form method="post" modelAttribute="_pro" name="form1" id="form1" action="${ctx}/product-manage/add-product">
      <table width="100%" border="1" align="center" cellpadding="6" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#F7F7F7">
        <tr>
          <td width="15%" bgcolor="#F7F7F7"><div align="center">产品分类</div></td>
          <td bgcolor="#F7F7F7">
          <select name="pid" id="pid" onchange="getData()">
          <c:forEach var="data" items="${clist}">
          <option value="${data.id}">${data.name}</option>
          </c:forEach>
          </select>
          &nbsp;&nbsp;
          <select name="categoryId" id="categoryId">
          <c:forEach var="data" items="${slist}">
          <option value="${data.id}">${data.name}</option>
          </c:forEach>
          </select>
          </td>
        </tr>
</form>

 jsp中的ajax的js部分: 

<script src="${ctx}/js/jquery-1.7.1.min.js"></script>
    function getData()
    {
		var pid = $("#pid").val();
	 	$.ajax({        
	         url:"${ctx}/product-manage/sub-category?"+Math.random(),
	         data:{pid : pid},
	         type : "post",  
		 	 cache : false,  
		 	 dataType : "json", 
	         error:function(){
	         	alert("error occured!!!");
	         },
	         success:function(data){
	         if(data!="0"){
				var categoryId = document.getElementById('categoryId');
				//清空数组
				categoryId.length = 0;
				for(var i=0;i<data.length;i++){
					 var xValue=data[i].id;  
                     var xText=data[i].name;  
                     var option=new Option(xText,xValue);  
                     categoryId.add(option);  
				}
	          }else{
	          	 var categoryId = document.getElementById('categoryId');
	          	 categoryId.length = 0;
		      }
	       }
	   });
	}

 后端的json处理代码:

	/**
	 * 得到产品种类对应的子种类  : json数据
	 * @throws IOException
	 */
	@SuppressWarnings("unchecked")
	@RequestMapping(value="sub-category")
	public String getSubCategory(HttpServletRequest request, HttpServletResponse response) throws IOException{
		response.setContentType("text/xml;charset=UTF-8");  
        
	    PrintWriter out = null;  
	    try {
	        out = response.getWriter();  
	    } catch (IOException e) {  
	        e.printStackTrace();  
	    }
	    String pid = request.getParameter("pid");
	    
	    String sql = "select id,name from product_category where pid=?";
		List<ProductCategory> clist = (List<ProductCategory>) DBHandler.queryBeanList(sql, ProductCategory.class, pid);
		
		JSONArray array = new JSONArray();  
        JSONObject member = null;  
        try {
	        for (ProductCategory p:clist) {  
	            member = new JSONObject();  
				member.put("name", p.getName());
	            member.put("id", p.getId());  
	            array.put(member);
	        }
        } catch (JSONException e) {
			e.printStackTrace();
		}
        
        out.print(array.toString());
		
	    return null;
	}

 

 

分享到:
评论

相关推荐

    ajax实现级联菜单的类子

    用Ajax实现的一个级联菜单,下拉菜单是从数据库中取数据的。

    jquery+ajax+jsp+servlet实现二级级联菜单

    jquery+ajax+jsp+servlet实现二级级联菜单,这是自己在实践中总结的一点小经验,代码从前台JAP到Servlet以及后台数据库设计,测试数据完整的流程,相信有点java基础的同仁们都可以看得明白

    基于ajax、jquery 通用无限级联菜单

    引用场景: 国家省市级联菜单、任何二级级联菜单、三级菜单、四级菜单、五.... 使用范例:详细参阅District.Selector.js文件 以国家地理信息为例: $(function () { var District1 = new District("userDistrict",{...

    利用了jquery的ajax实现二级联互动菜单

    利用了jquery的ajax实现。用到的包有:json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js jsp页面的代码: 代码如下: &lt;&#37;@ page contentType=”text/html; charset=gbk”%&gt; &lt;&#37;@ taglib ...

    jQuery ajax+PHP实现的级联下拉列表框功能示例

    主要介绍了jQuery ajax+PHP实现的级联下拉列表框功能,涉及php结合jQuery的$.get方法动态交互实现省市二级联动下拉列表框相关操作技巧,需要的朋友可以参考下

    jquery 实现二级/三级/多级联动菜单的思路及代码

    本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级、三级或多级联动也可以按照此方法完成。文章中涉及到的数据表为City,为方便管理。 设计此表如下 ID:自增长字段 City_Name:城市名称 ...

    jquery无限级联下拉菜单简单实例演示

    本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下: 最终效果图: 因为是级联,所以数据必须是树型结构的,这里的测试数据如下: 看下效果图: 1、...

    jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动

    利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:”, ttitle:”, sendpassword:”, description:” }, /...

    基于jQuery+JSON的省市二三级联动效果

    本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。 HTML 首先在head中载入jquery库和cityselect插件。 [removed][removed] [removed][removed] 接下来,我们在#city中...

    jquery+ajax实现省市区三级联动 (封装和不封装两种方式)

    先做出三个下拉菜单—-根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理。 2、用到的数据库表:Chinastates表 规律:根据国家级(中国)的areacode查询省级(如:北京) ; 根据省级的areacode查询...

    python入门到高级全栈工程师培训 第3期 附课件代码

    05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01 jquery属性操作之html,text,val方法 02 jquery循环方法和attr,prop方法 03 jquery...

    老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料

    ├─(21) 05 python s3 day43 js练习之二级联动.avi ├─(22) 06 python s3 day43 jquery以及jquery对象介绍.avi ├─(23) 07 python s3 day43 jquery选择器.avi ├─(24) 08 python s3 day43 jquery的查找筛选器....

    Java学习笔记-个人整理的

    \contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{...

Global site tag (gtag.js) - Google Analytics