Java web 级联下拉菜单的做法分享

最近在折腾一个很无聊的所谓的商城项目。里面有一个添加商品信息和更新商品信息都需要用到级联下拉菜单。如果只是单纯的普通html就方便多了。于是想了两个方法。

方法一 Ajax+jquery

//#“dalei”=大类型的下拉框。相对应xiaolei=小类型的下拉框
当你点击了大类型中的除了本身被选中之外的其他选项。小类型的下拉框就会进行清空和更新。

$(function(){
		$("#dalei").change(function(){
			var s = new Array();
			$("#xiaolei").empty();
			var id=$("#dalei").val();
			$.ajax({
				"url":"danyi?action=fina&id="+id,
				"async":true,
				"success":function(data){
					var s=data.split(",");
					for(var i=0;i<s.length;i++){
						var i1= new Array();
						i1=s[i].split("@");
						if(i1[1]!=undefined&&i1[0]!=""){
							var s1="<option value="+i1[1]+">"+i1[0]+"</option>";
								$("#xiaolei").append(s1);
						}
					
					}
				}
			})
		})
	})

相对应后台就需要做出反应处理。

当然我的做法和用词都没有使用驼峰命名法那些比较正规。。

 int did = Integer.valueOf(request.getParameter("id"));
 //这里通过ajax传送一个ID过来后台servlet。接受到了id就开始遍历这个id。然后寻找相对应的属性
                List<shoptype> sc1 = st.getshoptype();  
                //这个st.getshoptype 是拿到数据库中的一个表。此表里面有对应的大小类
               String pinjie = ""；
               //new一个字符串进行拼接传输一条字符串过去那边分解。
               //这里使用了“ @ ”  和“ ，” 2个分隔符。
                for (int i = 0; i < sc1.size(); i++) {
                if (did == sc1.get(i).getGtype_parentid()) {
                 pinjie = pinjie + sc1.get(i).getGtype_name() + "@" + sc1.get(i).getId() + ",";
                    }
                }
                response.getWriter().write(pinjie);

方法二 Jquery+jtsl

原理是通过先获取到数据库相对应的那张表里面的所有值。然后转发一个sesion给前台利用C标签来遍历。当我对大类型的选项进行了改变。相对应的下拉也会更变属性。
这里大类的name属性=goods_parentid
小类的name属性=goods_fatherid

$(function(){	
$("[name='goods_parentid']").change(function () {
            var id = $(this).val();
            $("[name='goods_fatherid']").html("");

            var html = "";
            <c:forEach items="${GOODTYPES }" var="goodType" varStatus="">
                if ("${goodType.gtype_parentid }" == id){
                    html +="<option value='${goodType.id }'>${goodType.gtype_name }</option>";
                }
</c:forEach>
            $("[name='goods_fatherid']").html(html);
        });

后台servlet相对应的将我拿到的所有数据转发过来

List<shoptype> sc1 = st.getshoptype();
request.getSession().setAttribute("GOODTYPES",sc1);

方法就分享到这里啦~ 新手代码能力差是这样的啦~