SSM +Maven 實現 三級聯動 無重新整理
阿新 • • 發佈：2019-01-09
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $().ready(function(){ alert("開始") $.post("lian.do?ToOne",function(data){ alert(data) var dataObj=eval("("+data+")"); for(var i=0;i<dataObj.length;i++){ var $option=$("<option></option>"); $option.attr("value",dataObj[i].oneid); $option.text(dataObj[i].onename); $("#one").append($option); } }); /********************************************************************************************************/ //一級引起二級的變化 $("#one").change(function(){ var jsonObj={ oneid:$(this).val() } //刪除二級下所有的下拉選,保留<option value="">請選擇.....</option> $("#two option[value!='']").remove(); //刪除三級下所有的下拉選保留<option value="">請選擇.....</option> $("#three option[value!='']").remove(); $.post("lian.do?one="+$("#one").val()+"&ToTwo",jsonObj,function(data,textStatus){ var dataObj=eval("("+data+")"); for(var i=0;i<dataObj.length;i++){ var $option=$("<option></option>"); $option.attr("value",dataObj[i].twoid); $option.text(dataObj[i].twoname); $("#two").append($option); } }); }); /********************************************************************************************************/ //二級引起三級的變化 $("#two").change(function(){ var jsonObj={ twoid:$(this).val() } //刪除三級下所有的下拉選保留<option value="">請選擇.....</option> $("#three option[value!='']").remove(); $.post("lian.do?two="+$("#two").val()+"&ToThree",jsonObj,function(data,textStatus){ var dataObj=eval("("+data+")"); for(var i=0;i<dataObj.length;i++){ var $option=$("<option></option>"); $option.attr("value",dataObj[i].threeid); $option.text(dataObj[i].threename); $("#three").append($option); } }); }); /********************************************************************************************************/ }); </script> <title>Insert title here</title> </head> <body> <h3 style="color: red" align="center">${message }</h3> <select class="form-control" id="one" name="one"> <option value="${one.oneid==null?'':one.oneid}" selected> ${one.onename==null?"請選擇...":one.onename}</option> </select> <select class="form-control" id="two" name="two"> <option value="${two.twoid==null?'':two.twoid}">${two.twoname==null?"請選擇...":two.twoname}</option> </select> <select class="form-control" id="three" name="three"> <option value="${three.threeid==null?'':three.threeid}">${three.threename==null?"請選擇...":three.threename}</option> </select> </body> </html>