二级联动的下拉框

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/anmoyyh/article/details/76887044

controller中:

/**
* 一级类目

* @param product
* @return
* @return
*/
@RequestMapping("/oneCascade.do")
public @ResponseBody
List<TwoCategory> oneCascade(HttpServletRequest request) {
System.out.println("进入方法");
Integer id = Integer.parseInt(request.getParameter("value"));
System.out.println(id);
TwoCategory t = new TwoCategory();
t.setOneCategoryId(id);


List<TwoCategory> list = twoCategoryService.selectByObject(t);


for (int i = 0; i < list.size(); i++) {
System.out.println(list.get(i).getName());
}
return list;
}

/**
* 二级类目

* @param product
* @return 
* @return
*/
@RequestMapping("twoCascade.do")
public @ResponseBody
String twoCascade(HttpServletRequest request) {
System.out.println("进入方法");
Integer id =Integer.parseInt(request.getParameter("value1")); //拿到前台传过来的value1
System.out.println(id);
//先通过传过来的二级目录ID,获取选择的二级目录信息
TwoCategory two=twoCategoryService.selectByPrimaryKey(id);

return two.getOneCategoryId()+"";
}

jsp中:

//一级类目
$('#oneCategory').change(function () {
var value=$("#oneCategory").val();
if(value=="all"){
$("#twoCategory").empty();
        $("#twoCategory").append("<option value='all'>全部</option>");
}else{
$.ajax({     
        url: "oneCascade.do?value="+value,
        type: "POST",
        dataType:"json",
        success: function (jdata) {
       
        $("#twoCategory").empty(); //清除
        $("#twoCategory").append("<option value='all'>全部</option>"); //末尾追加
       

        for(var i=0;i<jdata.length;i++){

//遍历每次拿到的list数组

        $("#twoCategory").append("<option value='"+jdata[i].id+"'>"+jdata[i].name+"</option>");
        }
        console.log(jdata);
            }
    });
}
 
});
//二级类目
$('#twoCategory').change(function () {
var value1=$("#twoCategory").val();

if(value1=="all"){
$("#oneCategory").find("option[value='all']").prop("selected",true);
}else{
$.ajax({     
        url: "twoCascade.do?value1="+value1, //value1传到后台去
        type: "POST",
        dataType:"json", //指后台传过来的格式
        success: function (data) {
           var array = new Array();  //定义数组   
    $("#oneCategory option").each(function(){  //遍历所有option  
         var txt = $(this).val();   //获取option值   
         if(txt==data){  
              //设置选中

               $("#oneCategory").find("option[value='"+data+"']").prop("selected",true);

 // 这里用prop,有一个方法是attr,attr会导致一次两次可用,第三次不管用,浏览器的兼容问题.

         }
    });
       
       

        console.log(data);

//这个是在页面中F12弄出来

            }
    });
    }
}); 


xml中:

select id, one_category_id, name, create_people, create_time, state, remark
    from two_category

 select id, name, create_people, create_time, state, remark
    from one_category

展开阅读全文

没有更多推荐了,返回首页