Web多级联动下拉框（从数据库中获取数据，MVC模式，使⽤的是tomcat）
⼀、⽂件位置
java代码的位置
⼆、先编写⼀个jsp页⾯⽤来跳转到多级下拉框的jsp页⾯
随便编⼀个就⾏了，这⾥就叫index.jsp
1.index.jsp
<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8" import="del.*" %>
<%@ taglib uri="java.sun/jsp/jstl/core" prefix="c"%>
<jsp:include page="Header.jsp" />
<html>
<head>
<title>⾸页</title>
<link rel="stylesheet" href="../css/show_css.css" type="text/css">
</head>
<body>
<a href="ddbone.do" target = "right">跳转到下拉框页⾯</a>
</body>
</html>
2.Xlk.jsp
<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8" import="del.*,java.util.*,java.sql.*" %>
<%@ taglib uri="java.sun/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<jsp:include page="Header.jsp" />
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script  src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function kindId(Id){
var Id = Id.value;
$.ajax({
url:"${tPath}/view/ddbtwo.do",
url:"${tPath}/view/ddbtwo.do",  type:"get",
timeout:"1000",
data:{Id:Id},
success:function(data){
$("#thing option").remove();
$("#thing").append("<option value='0'>选择商品</option>");    if (data != 0) {
for ( var i = 0; i < data.length; i++) {
var classId = data[i].classId;
var className = data[i].className;
var Id_brand = data[i].Id_Brand;
$("#thing").append(
"<option value="+Id_brand+">"
+ className + "</option>");
}
}
},
error : function(XMLResponse) {
sponseText);
}
});
}
function thingId(Id){
var Id = Id.value;
$.ajax({
url:"${tPath}/view/ddbthree.do",  type:"get",
timeout:"1000",
data:{Id:Id},
success:function(data){
$("#brand option").remove();
$("#brand").append("<option value='0'>选择品牌</option>");  if (data != 0) {
for ( var i = 0; i < data.length; i++) {
var classId = data[i].classId;
var className = data[i].className;
var Id_model = data[i].Id_Model;
$("#brand").append(
"<option value="+Id_model+">"
+ className + "</option>");
}
}
},
error : function(XMLResponse) {
sponseText);
}
});
}
function brandId(Id){
var Id = Id.value;
$.ajax({
url:"${tPath}/view/ddbfour.do", type:"get",
timeout:"1000",
data:{Id:Id},
success:function(data){
$("#model option").remove();
$("#model").append("<option value='0'>选择型号</option>");  if (data != 0) {
for ( var i = 0; i < data.length; i++) {
var Id_model = data[i].Id_Model;
var className = data[i].className;
$("#model").append(
"<option value="+className+">"
"<option value="+className+">"
+ className + "</option>");
}
}
},
error : function(XMLResponse) {
sponseText);
}
});
}
</script>
<style type="text/css">
.d1{
width:800px;
height:auto;
margin:-50px auto 0 500px;
/*color:#2ec0f6;*/
font-size: 20px;
}
.d2{
width:auto;
height:auto;
position:absolute;
left:250px;
top:30px;
right:20px;
bottom:auto;
font-size: 20px;
}
</style>
<head>
<meta charset="UTF-8">
<title>四级联动获取数据库数据</title>
</head>
<body>
<div class="d1">
<form name="myform" onSubmit="return isValid(this);" action="wjAddJudge.do">
<div>
<label>选择    ；商    ；品  :</label>    <select id="kind" name="kind" onChange="kindId(this);">
<option value="0">商品种类</option>
<c:forEach var="user" items="${list}">
<option value="${user.id_menu}">${user.kind}</option>
</c:forEach>
</select>  <select  id="thing" name="thing" onChange="thingId(this);">
<option value="0">商品名称</option>
</select>  
<select  id="brand" name="brand" onChange="brandId(this);">
<option value="0">商品品牌</option>
</select>
<select  id="model" name="model" >
<option value="0">品牌型号</option>
</select>
</div>
<div>
<button type="submit" >添加</button>
</div>
</form>
</div>
</body>
</html>
三、Controller.java代码
1.DdbControl.java
ller;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.json.JSONArray;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
del.DBOper;
del.Ddb;
del.User;
@Controller
public class DdbControl {
//⼆级联动获取数据库数据
//⼀级下拉框
@RequestMapping("/view/ddbone")
public String ddbone(HttpServletRequest request,HttpServletResponse response) throws IOException, ClassNotFoundException, SQLException { //调⽤javabean处理
Ddb d=new Ddb();
ArrayList<Ddb> list=d.two();
request.setAttribute("list", list);
return "Xlk.jsp";
}
//⼆级下拉框
@RequestMapping("/view/ddbtwo")
public String ddbtwo(HttpServletRequest request,HttpServletResponse response) throws Exception{
response.setContentType("text/json; charset=UTF-8");
//获取部门ID
int id = Integer.Parameter("Id"));
PrintWriter out = null;
Ddb d=new Ddb();
try{
out = Writer();
}catch(Exception e){
e.printStackTrace();
}
JSONArray array = new JSONArray();
JSONObject member = null;
try{
//根据种类的Id 来查种类下的所有商品
List<Ddb> ClassesList = d.two2(id);
for(Ddb classes:ClassesList){
member = new JSONObject();
member.put("classId", Id_Pmenu());
member.put("className", Thing());
member.put("Id_Brand", Id_brand());  //三级下拉框的索引
array.put(member);
}
}catch(Exception e){
e.printStackTrace();
}
out.String());
return null;
}
//三级下拉框
@RequestMapping("/view/ddbthree")
public String ddbthree(HttpServletRequest request,HttpServletResponse response) throws Exception{  response.setContentType("text/json; charset=UTF-8");
//获取部门ID
int id = Integer.Parameter("Id"));
PrintWriter out = null;
Ddb d=new Ddb();
try{
out = Writer();
}catch(Exception e){
e.printStackTrace();
}
JSONArray array = new JSONArray();
JSONObject member = null;
try{
//根据种类的Id 来查种类下的所有商品
List<Ddb> ClassesList = d.three(id);
for(Ddb classes:ClassesList){
member = new JSONObject();
member.put("classId", Id_brand());
member.put("className", Brand());
member.put("Id_Model", Id_model());  //四级下拉框的索引
array.put(member);
}
}catch(Exception e){
e.printStackTrace();
}
javabean是干嘛的
out.String());
return null;
}
//四级下拉框
@RequestMapping("/view/ddbfour")
public String ddbfour(HttpServletRequest request,HttpServletResponse response) throws Exception{  response.setContentType("text/json; charset=UTF-8");
//获取部门ID
int id = Integer.Parameter("Id"));
PrintWriter out = null;
Ddb d=new Ddb();
try{
out = Writer();
}catch(Exception e){
e.printStackTrace();
}
JSONArray array = new JSONArray();
JSONObject member = null;
try{
//根据种类的Id 来查种类下的所有商品
List<Ddb> ClassesList = d.four(id);
for(Ddb classes:ClassesList){
member = new JSONObject();
member.put("Id_Model", Id_model());
member.put("className", Model());
member.put("id_no", Id_no());

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。