默认查出一级分类的第一条数据,和一级分类第一条对应的二级分类条目,当选择一级分类的其他条目时,通过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>
<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实现的一个级联菜单,下拉菜单是从数据库中取数据的。
jquery+ajax+jsp+servlet实现二级级联菜单,这是自己在实践中总结的一点小经验,代码从前台JAP到Servlet以及后台数据库设计,测试数据完整的流程,相信有点java基础的同仁们都可以看得明白
引用场景: 国家省市级联菜单、任何二级级联菜单、三级菜单、四级菜单、五.... 使用范例:详细参阅District.Selector.js文件 以国家地理信息为例: $(function () { var District1 = new District("userDistrict",{...
本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级、三级或多级联动也可以按照此方法完成。文章中涉及到的数据表为City,为方便管理。 设计此表如下 ID:自增长字段 City_Name:城市名称 ...
利用了jquery的ajax实现。用到的包有:json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js jsp页面的代码: 代码如下: <%@ page contentType=”text/html; charset=gbk”%> <%@ taglib ...
主要介绍了jQuery ajax+PHP实现的级联下拉列表框功能,涉及php结合jQuery的$.get方法动态交互实现省市二级联动下拉列表框相关操作技巧,需要的朋友可以参考下
本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下: 最终效果图: 因为是级联,所以数据必须是树型结构的,这里的测试数据如下: 看下效果图: 1、...
利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:”, ttitle:”, sendpassword:”, description:” }, /...
本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。 HTML 首先在head中载入jquery库和cityselect插件。 [removed][removed] [removed][removed] 接下来,我们在#city中...
先做出三个下拉菜单—-根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理。 2、用到的数据库表:Chinastates表 规律:根据国家级(中国)的areacode查询省级(如:北京) ; 根据省级的areacode查询...
05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01 jquery属性操作之html,text,val方法 02 jquery循环方法和attr,prop方法 03 jquery...
\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}{...
├─(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的查找筛选器....