1: Display in the original drop-down box (not superimposed)
Front-end code:
<!-- 类别下拉框 -->
<script type="text/javascript">
function change(val,name) {
var vc=""; //定义一个存放分类编号的变量
var str = val; //类别编号
var id; // 分类id
//alert(val);
id = str;
//alert(id);
$("select[name=category_1]").empty(); //清空seletct的数据
<%-- var url = '<%= basePath%>/biz/ServiceKnowledge_queryCategoryPid.action?categoryPid=001'+id; --%>
//alert(id);
$.ajax({
type: "POST",
url: '<%= basePath%>/biz/ServiceKnowledge_queryCategoryPid.action?',
data: {categoryPid:id},
datatype : 'json',
success: function(result){
if(result.length!=2){
var optionString = "<option grade=\'请选择\' selected = \'selected\'>--请选择子类--</option>";
//alert(result);
var xqo = eval('(' + result + ')');
for(var i in xqo){
//alert(xqo[i].category);
optionString+="<option value='"+xqo[i].categoryId+"'>"+xqo[i].category+"</option>"
}
$("select[name=category_1]").append(optionString);
}
}
});
//$("#categoryId").val();
vc+=str;
$("#categoryId").val(vc);
}
</script>
<li><label>类别选择</label>
<div id="select" >
<select style="width:200px;height: 30px;background:#eeeeee" name="category_1" id="category_1" onchange="change(this.options[this.options.selectedIndex].value,this.options[this.options.selectedIndex].text)">
<option >--请选择分类--</option>
<c:forEach items="${serviceCategoryList}" var="serviceCategory">
<option value="${serviceCategory.categoryId}">${serviceCategory.category}</option>
</c:forEach>
</select>
</div>
</li>
Backend code:
/**
* 跳转到添加页面
* @return
*/
public String openAdd(){
List<ServiceCategory> serviceCategoryList = serviceCategoryService.queryCategoryPid("0");
ActionContext.getContext().getSession().put("serviceCategoryList", serviceCategoryList);
forwardView = ADD_JSP;
return SUCCESS;
}
/**
* 查询categoryPid的数据
* @return
* @throws Exception
* @author uug
* @throws IOException
* @date 2017年12月16日
*/
public String queryCategoryPid() throws IOException{
List<ServiceCategory> serviceCategoryList = serviceCategoryService.queryCategoryPid(categoryPid);
HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter writer = response.getWriter();
try {
Gson gson = new Gson();
String result = gson.toJson(serviceCategoryList);
System.err.println("result:"+result);
writer = response.getWriter();
writer.write(result);
//writer.println(result);
} catch (Exception e) {
System.out.println("getAllHotnewsForJson出错："+e);
}finally{
writer.flush();
writer.close();
}
return null;
}2: The drop-down box is superimposed back
Front-end code:
<script type="text/javascript">
var allNum = 1;//菜单的总的级数
/*
Ajax想数据库读取菜单，即传入一级菜单，获取二级
num,菜单的级数。传入1级之后，判断一下2级是否存在，不存在则生成html代码，存在则清空之后重新赋值
实现原理：
1.级别从小到大：第一次选中，则直接生成2级，同理，选中n级，自动生成n+1级
2.级别从大到小：如果选中了4级，突然再选中1级，那么2级以上的先删除，然后再重新生成2级。
*/
function getMenuByajax(num,categoryId){
//alert('num='+num);
menuVal = $('#menu'+num).val();
//alert('menuVal='+menuVal)
//alert('categoryId='+categoryId)
$("#categoryId").attr("value",categoryId);//给底下隐藏的categoryid字段赋值。
//向服务器发送ajax请求，发送categoryPid的值，获取下级菜单列表
$.post("<%=path %>/front/CategoryJson_queryByCategoryPid.action",
{
categoryPid:menuVal
},
function(data,status){
var dataJson = JSON.stringify(data);
//alert(JSON.stringify(data));
if(null == dataJson || "[]"==dataJson){
return;
}
//alert("数据: \n" + data + "\n状态: " + status);
if(allNum<=num){//说明是从高级之后再点击低级，例如点击了4级之后再点击2级，那么需要删除3和4级
for (var i=num+1;i<=allNum;i++){
$("#menu"+i).remove();
}
allNum = num;//重置allNum最大级数
}
//总的级别+1
allNum = allNum + 1;
//alert('allNum='+allNum);
//先添加select列表，名字就是menu{级别}，即如果是menu2，点击之后生成的是menu3
$("#seachformLi").append("<select name=\"menu"+allNum+"\" id=\"menu"+allNum+"\" onchange=\"getMenuByajax("+allNum+",this.options[this.options.selectedIndex].value)\"><option value=\"\">--选择"+allNum+"级菜单--</option></select>");
$("#menu"+allNum).append("<option value=\"\">--选择一级菜单--</option>");
//给菜单加option选项值
$.each(data, function(i, item) {
//alert('item.categoryId='+item.categoryId);
$("#menu"+allNum).append("<option value=\""+item.categoryId+"\">"+item.category+"</option>");
});
});
}
</script>
<li id="seachformLi"><label>父类类别编号</label>
<select name="menu1" id="menu1" onchange="getMenuByajax(1,this.options[this.options.selectedIndex].value)">
<option value="">--选择一级菜单--</option>
<s:iterator value="listServiceCategory">
<option value="${categoryId}">${category}</option>
</s:iterator>
</select>
</li>Backend code:
/**
* 跳转到添加页面
* @return
*/
public String openAdd(){
listServiceCategory = serviceCategoryService.queryCategoryPid(serviceCategory.getCategoryPid());//读取列表
forwardView = ADD_JSP;
return SUCCESS;
}
/**
* 根据父类编号查找儿子列表:父类类别编号，如果为空,则直接输出一级菜单
* @return
* @throws IOException
*/
public String queryByCategoryPid() throws IOException{
//System.out.println("进入queryByCategoryPid...,categoryPid="+categoryPid);
//String check = "";
try {
List<ServiceCategory> list = serviceCategoryService.queryCategoryPid(categoryPid);
Gson gson = new Gson();
String json = gson.toJson(list);
PrintWriter writer = getPrintWriter();
writer.write(json);
writer.flush();
writer.close();
} catch (Exception e) {
System.out.println("queryByCategoryPid出错："+e);
}
return null;
}3: Unified dao layer (service layer omitted)
/**
* 查询categoryPid的数据
* @param categoryPid
* @return
*/
@SuppressWarnings("unchecked")
public List<ServiceCategory> queryCategoryPid(String categoryPid){
//System.out.println("进入dao。。。");
String hql = "";
if(null == categoryPid || "".equals(categoryPid)){
categoryPid = "";
}
hql = "from ServiceCategory where categoryPid = '"+categoryPid+"'";
//System.out.println("hql=="+hql);
return this.getHibernateTemplate().find(hql);
}