需求:两个下拉框之间添加联动效果
开始是在controller层把根据大类id查询出来的结果放入Model,利用velocity循环输出
/**
* 产品类目页
* @param model
* @return
*/
@RequestMapping(value = "/productType.do")
public String productCategory(Model model){
//TODO 显示产品类目
model.addAttribute("parent_type", productService.getproduct_type());//产品大类
model.addAttribute("child_type", productService.getproduct_item("0"));//产品类目
<div class="col-md-4 col-xs-4 mb-10">
<label for="" class="col-md-4 col-xs-12 text-r">所属子类:</label>
<select name="" id="child_vategory" class="input-style col-md-8 col-xs-12">
<option value="">--请选择--</option>
#foreach($obj in ${child_type})
<option value="${obj.type_id}">$!{obj.type_name}</option>
#end
</select>
但是由于页面加载后不会再去Model读取,下拉选项并没有改变。
解决方法: 采用JsonArray传到前台,循环append到option
@RequestMapping(value = "/getproduct_item.do")
public void getproduct_item(String pid,Model model){
if(pid==null || "".equals(pid)){
pid="0";
}
String result="";
List<Map<String ,Object>> list = productService.getproduct_item(pid);
if(list.size()>0){
JSONArray jsonArray = JSONArray.fromObject(list);
result=jsonArray.toString();
}
ajaxReturn(result);
}
/**
* 类目信息
*/
$("#parent_type").on("change",function () {
var pid=$("#parent_type").find("option:selected").val();
$.ajax({
url:'$rc.contextPath/product/getproduct_item.do',
type:'post',
data:{
pid:pid
},
datatype:'text',
success:function(data){
var obj=$.parseJSON(data)
for(var i=0;i<obj.length;i++){
$("#child_type").append("<option value="+obj[i].type_id+">"+obj[i].type_name+"</option>");
}
},
error:function (data) {
layer.msg("请求异常" ,{icon:2,time:3000});
}
});
});