版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/philsonzhao/article/details/84226241
实现朝代、皇帝、纪年、政区类型、政区沿革五级联动
HTML页面
<div class="spantype center-block ">
<p style="line-height: 2;">朝代:</p>
<p>
<select id="NJL1" class="form-control input-sm" onchange="selectChange1()">
<option value="0">请选择朝代</option>
<option value="秦朝">秦朝</option>
<option value="西汉">西汉</option>
<option value="新">新</option>
<option value="东汉">东汉</option>
<option value="魏">魏</option>
<option value="蜀">蜀</option>
<option value="吴">吴</option>
<option value="西晋">西晋</option>
<option value="东晋">东晋</option>
<option value="南朝(宋)">南朝(宋)</option>
<option value="南朝(齐)">南朝(齐)</option>
<option value="南朝(梁)">南朝(梁)</option>
<option value="南朝(陈)">南朝(陈)</option>
<option value="北朝(北魏)">北朝(北魏)</option>
<option value="北朝(东魏)">北朝(东魏)</option>
<option value="北朝(西魏)">北朝(西魏)</option>
<option value="北朝(北周)">北朝(北周)</option>
<option value="北朝(北齐)">北朝(北齐)</option>
<option value="隋">隋</option>
<option value="唐">唐</option>
<option value="周">周</option>
<option value="后梁">后梁</option>
<option value="后唐">后唐</option>
<option value="后晋">后晋</option>
<option value="后汉">后汉</option>
<option value="后周">后周</option>
<option value="北宋">北宋</option>
<option value="南宋">南宋</option>
<option value="辽">辽</option>
<option value="金">金</option>
<option value="元">元</option>
<option value="西夏">西夏</option>
<option value="明">明</option>
<option value="清">清</option>
<option value="中华民国">中华民国</option>
<option value="中华人民共和国">中华人民共和国</option>
</select>
</p>
<p>——</p>
<p>
<select id="NJL2" class="form-control input-sm" onchange="selectChange2()">
<option value="0">请选择</option>
</select>
</p>
</div>
<div class="spantype center-block ">
<p style="line-height: 2;">公元纪年:</p>
<p style="width: 74%">
<select id="NJL3" class="form-control input-sm" onchange="selectChange3()" style="width: 100%">
<option value="0">请选择纪年</option>
</select>
</p>
</div>
<div class="spantype center-block ">
<p style="line-height: 2;">政区类型:</p>
<p style="width: 74%">
<select id="NJL4" class="form-control input-sm" onchange="selectChange4()" style="width: 100%">
<option value="0">请选择政区类型</option>
</select>
</p>
</div>
<div class="spantype center-block ">
<p style="line-height: 2;">沿革类型:</p>
<p style="width: 74%">
<select id="NJL5" class="form-control input-sm" style="width: 100%">
<option value="0">请选择沿革类型</option>
</select>
</p>
</div>
```
==JS页面==
```
function selectChange1() {
var njl1_value = document.getElementById("NJL1").value;
temp1 = {"njl1" : njl1_value};
console.log(njl1_value);
$.ajax({
type : "post",
url : "getMenuLevel1.action",
async : false,
data : {"njl1" : njl1_value},
scriptCharset : 'UTF-8',
dataType : 'json',
success : function(msg) {
console.log(msg);
var menuData = msg.data;
var selectoption = menuData[i];
for(var i=0; i < menuData.length; i++) {
console.log(menuData[i]);
var newOption = document.createElement("option");
newOption.value = menuData[i];
newOption.innerHTML = menuData[i];
document.getElementById("NJL2").appendChild(newOption);
}
}
});
}
function selectChange2() {
var njl2_value = document.getElementById("NJL2").value;
temp1 = {"njl2" : njl2_value};
console.log(njl2_value);
$.ajax({
type : "post",
url : "getMenuLevel2.action",
async : false,
data : {"njl2" : njl2_value},
scriptCharset : 'UTF-8',
dataType : 'json',
success : function(msg) {
console.log(msg);
var menuData = msg.data;
var selectoption = menuData[i];
for(var i=0; i < menuData.length; i++) {
console.log(menuData[i]);
document.getElementById("NJL3").innerHTML = "<option value=\"0\">请选择纪年</option>";
var newOption = document.createElement("option");
newOption.value = menuData[i];
newOption.innerHTML = menuData[i];
document.getElementById("NJL3").appendChild(newOption);
}
}
});
}
function selectChange3() {
var njl3_value = document.getElementById("NJL3").value;
temp1 = {"njl3" : njl3_value};
console.log(njl3_value);
$.ajax({
type : "post",
url : "getMenuLevel3.action",
async : false,
data : {"njl3" : njl3_value},
scriptCharset : 'UTF-8',
dataType : 'json',
success : function(msg) {
console.log(msg);
var menuData = msg.data;
var selectoption = menuData[i];
for(var i=0; i < menuData.length; i++) {
console.log(menuData[i]);
var newOption = document.createElement("option");
newOption.value = menuData[i];
newOption.innerHTML = menuData[i];
document.getElementById("NJL4").appendChild(newOption);
}
}
});
}
function selectChange4() {
var njl4_value = document.getElementById("NJL4").value;
temp1 = {"njl4" : njl4_value};
console.log(njl4_value);
$.ajax({
type : "post",
url : "getMenuLevel4.action",
async : false,
data : {"njl4" : njl4_value},
scriptCharset : 'UTF-8',
dataType : 'json',
success : function(msg) {
console.log(msg);
var menuData = msg.data;
var selectoption = menuData[i];
for(var i=0; i < menuData.length; i++) {
console.log(menuData[i]);
var newOption = document.createElement("option");
newOption.value = menuData[i];
newOption.innerHTML = menuData[i];
document.getElementById("NJL5").appendChild(newOption);
}
}
});
}
JAVA页面
public class SeniorSearch extends ActionSupport implements ServletRequestAware, ServletResponseAware{
/**
*
*/
private static final long serialVersionUID = 1L;
private String njl1;
private String njl2;
private String njl3;
private String njl4;
public String getNjl4() {
return njl4;
}
public void setNjl4(String njl4) {
this.njl4 = njl4;
}
public String getNjl3() {
return njl3;
}
public void setNjl3(String njl3) {
this.njl3 = njl3;
}
public String getNjl2() {
return njl2;
}
public void setNjl2(String njl2) {
this.njl2 = njl2;
}
public String getNjl1() {
return njl1;
}
public void setNjl1(String njl1) {
this.njl1 = njl1;
}
public void getMenuLevel1() throws Exception {
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");
PrintWriter out = ServletActionContext.getResponse().getWriter();
DBService ds = new DBService();
JSONObject json = new JSONObject();
JSONArray ja = new JSONArray();
Connection conn = ds.setConnection();
String str1 = "select * from cdnh where DTCD = '"+njl1+"';";
System.out.println(str1);
PreparedStatement pstmt = conn.prepareStatement(str1);
ResultSet res = pstmt.executeQuery();
while (res.next()) {
ja.put(res.getString(2));
}
System.out.println(ja.toString());
json.put("data", ja);
pstmt.close();
conn.close();
out.write(json.toString());
out.close();
}
public void getMenuLevel2() throws Exception {
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");
PrintWriter out = ServletActionContext.getResponse().getWriter();
DBService ds = new DBService();
JSONObject json = new JSONObject();
JSONArray ja = new JSONArray();
Connection conn = ds.setConnection();
String str2 = "select * from level2_hd_gy where NH = '"+njl2+"';";
System.out.println(str2);
PreparedStatement pstmt = conn.prepareStatement(str2);
ResultSet res = pstmt.executeQuery();
while (res.next()) {
ja.put(res.getString(2));
}
System.out.println(ja.toString());
json.put("data", ja);
pstmt.close();
conn.close();
out.write(json.toString());
out.close();
}
public void getMenuLevel3() throws Exception {
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");
PrintWriter out = ServletActionContext.getResponse().getWriter();
DBService ds = new DBService();
JSONObject json = new JSONObject();
JSONArray ja = new JSONArray();
Connection conn = ds.setConnection();
String str3 = "select * from level3_gy_zq where GYJN = '"+njl3+"';";
System.out.println(str3);
PreparedStatement pstmt = conn.prepareStatement(str3);
ResultSet res = pstmt.executeQuery();
while (res.next()) {
ja.put(res.getString(2));
}
System.out.println(ja.toString());
json.put("data", ja);
pstmt.close();
conn.close();
out.write(json.toString());
out.close();
}
public void getMenuLevel4() throws Exception {
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");
PrintWriter out = ServletActionContext.getResponse().getWriter();
DBService ds = new DBService();
JSONObject json = new JSONObject();
JSONArray ja = new JSONArray();
Connection conn = ds.setConnection();
String str4 = "select * from level4_zq_yg where ZQLX = '"+njl4+"';";
System.out.println(str4);
PreparedStatement pstmt = conn.prepareStatement(str4);
ResultSet res = pstmt.executeQuery();
while (res.next()) {
ja.put(res.getString(2));
}
System.out.println(ja.toString());
json.put("data", ja);
pstmt.close();
conn.close();
out.write(json.toString());
out.close();
}
@Override
public void setServletResponse(HttpServletResponse arg0) {
// TODO Auto-generated method stub
}
@Override
public void setServletRequest(HttpServletRequest arg0) {
// TODO Auto-generated method stub
}
}
struts配置
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<constant name="struts.multipart.maxSize" value="100000000" />
<package name="default" namespace="/" extends="struts-default">
<action name="getMenuLevel1" class="com.beidou.zqcx.SeniorSearch" method="getMenuLevel1">
<result>/index.html</result>
</action>
<action name="getMenuLevel2" class="com.beidou.zqcx.SeniorSearch" method="getMenuLevel2">
<result>/index.html</result>
</action>
<action name="getMenuLevel3" class="com.beidou.zqcx.SeniorSearch" method="getMenuLevel3">
<result>/index.html</result>
</action>
<action name="getMenuLevel4" class="com.beidou.zqcx.SeniorSearch" method="getMenuLevel4">
<result>/index.html</result>
</action>
</package>
</struts>