数据库sql:
CREATE TABLE `tb_category` (
`cid` char(40) NOT NULL,`cname` varchar(50) DEFAULT NULL,
`pid` char(40) DEFAULT NULL,
`desc` varchar(200) DEFAULT NULL,
PRIMARY KEY (`cid`),
UNIQUE KEY `cname` (`cname`),
KEY `FK_t_category_t_category` (`pid`),
CONSTRAINT `fk_category_category` FOREIGN KEY (`pid`) REFERENCES `tb_category` (`cid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
jsp:
<tr>
<td style="text-align: right;">所属一级分类:</td>
<td>
<select id="FirstCate" name="FirstCate" style="width: 232px;height: 30px ;font-size: 15px" οnchange="changeCategory()">
<option >----请--选--择----</option>
<c:forEach items="${listCategory}" var="lc">
<c:if test="${lc.pid==null}">
<option value="${lc.cid }"> ${lc.cname }</option>
</c:if>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td style="text-align: right;">所属二级分类:</td>
<td>
<select id="secondTypeId" name="cid" style="width: 232px;height: 30px" >
<option value="">----请--选--择----</option>
</select>
</td>
js代码:
<script type="text/javascript">
function changeCategory(){
var cid = $("#FirstCate").val();
$.ajax({
type:'POST',
dataType:'text',//不写这个会提示下载或者改为json也是
url:'${pageContext.request.contextPath}/admin/video/ajaxFindSecondType',
data:{
cid1 : cid
},
success:function(data){
var secondCategoryObj = document.getElementById("secondTypeId");
secondCategoryObj.innerHTML = "<option value=''>----请--选--择----</option>";
//解析json为数组
var data = eval("("+data+")");
var dataList = data.tasks;
if (dataList!= null) { //如果没有这一步,js会报length null之类的
for(var i=0;i<dataList.length;i++)//遍历
{
var categoryObj = dataList[i];
var cid = categoryObj.id;
var cname = categoryObj.name;
//进行添加到标签里
secondCategoryObj.innerHTML = secondCategoryObj.innerHTML + "<option value='"+cid+"'>"+cname+"</option>";
}
}
}
});
}
</script>
Controller代码:
(1)
//通过url路径到add_moive页面,进行添加前准备(先查全部分类并传递到jsp,把一级分类的数据显示出来)
@RequestMapping("/addVideo")
public ModelAndView addVideo()throws Exception{
//查询所有分类并传数据到jsp页面去
List<CategoryCustom> listCategory = categoryService.findAllCategory();
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("listCategory", listCategory);
modelAndView.setViewName("admin/yingshi/add_moive");
return modelAndView;
}
(2)
//根据id查询二级分类(我的分类在同一张表中(注意))。
@RequestMapping("/ajaxFindSecondType")
public @ResponseBody Map<String,Object> findSecondTypeById(String cid1,HttpServletResponse response )throws Exception{
List<TbCategory> lTbCategories = categoryService.findCategoryById(cid1);
Map<String,Object> jsonMap = new HashMap<String, Object>();
List list = null;
if(null != lTbCategories && lTbCategories.size()>0){
list = new ArrayList();
for(TbCategory tbCategory : lTbCategories){
Map<String,String> taskMap=new HashMap<String,String>();
taskMap.put("id", tbCategory.getCid());
taskMap.put("name", tbCategory.getCname());
list.add(taskMap);
}
}
jsonMap.put("tasks", list);
return jsonMap;
}