SelectArea.jsp
6.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<title>index.html</title>
<meta name="decorator" content="default"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery select表单提交省市区城市三级联动</title>
<script src="${ctxStatic}/common/echarts.min.js"></script>
<script src="${ctxStatic}/common/macarons.js"></script>
<script src="${ctxStatic}/common/shanxi1.js"></script>
<script src="${ctxStatic}/select3/Area.js" type="text/javascript"></script>
<script src="${ctxStatic}/select3/AreaData_min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '44', '0', '0');
});
//得到地区码
function getAreaID(){
var area = 0;
if($("#seachdistrict").val() != "0"){
area = $("#seachdistrict").val();
}else if ($("#seachcity").val() != "0"){
area = $("#seachcity").val();
}else{
area = $("#seachprov").val();
}
return area;
}
function showAreaID() {
//地区码
var areaID = getAreaID();
//地区名
var areaName = getAreaNamebyID(areaID) ;
alert("您选择的地区码1：" + aeaID + " 地区名：" + areaName);
}
//根据地区码查询地区名
function getAreaNamebyID(areaID){
var areaName = "";
if(areaID.length == 6){
areaName = area_array[areaID];
}else if(areaID.length == 9){
var index1 = areaID.substring(0, 6);
areaName = area_array[index1] + " " + sub_array[index1][areaID];
}else if(areaID.length == 12){
var index1 = areaID.substring(0, 6);
var index2 = areaID.substring(0, 9);
areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID];
}
return areaName;
}
function sendAjax(){
$.ajax({
type:"POST", //请求方式
url:"${ctx}/test/select3test/sendajax", //请求路径
cache: false, //(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能，设置为 false 将不缓存此页面。
data:"param1=info1¶m2=info2", //传参 data:"id="+ id +"&zjlx="+ zjlx
dataType: "json",//返回值类型 使用json的话也可以，但是需要在JS中编写迭代的html代码，如果格式样式复杂的话还是用html返回类型好
contentType: "application/json;charset=utf-8",
success:function(data){
$("#resultDataType").html("<span style='color:green;font-size:14px;'>返回的数据类型为："+ typeof(data) +"</span>");
var str="";
$.each(data, function(index, val){
str += "第" + index + "项："+ val + ";";
});
str = str.substring(0, str.length - 1);
$("#resultData").html("内容为："+str);
}
});
}
function personOpen(){
var iWidth=1100;
var iHeight=600;
var iTop = (window.screen.height - 30 - iHeight) / 2;
var iLeft = (window.screen.width - 10 - iWidth) / 2;
window.open("${ctx}/reg/base/regBasePerson/list?WO=1","人员信息",
"height="+ iHeight +",width="+ iWidth +",top="+ iTop +",left="+ iLeft +",toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=no");
}
function restjson(){
/**
$.ajax({
type:"POST", //请求方式
url:"${ctx}/reg/base/regBaseRestful/display/fangwu", //请求路径
cache: false, //(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能，设置为 false 将不缓存此页面。
dataType: "html",//返回值类型 使用json的话也可以，但是需要在JS中编写迭代的html代码，如果格式样式复杂的话还是用html返回类型好
success:function(data){
$("#restinfo").html(data.regBaseHs);
}
});***/
$("#restinfo").load('${ctx}/reg/base/regBaseRestful/display/hjson');
}
function restxml(){
/**
$.ajax({
type:"POST", //请求方式
url:"${ctx}/reg/base/regBaseRestful/display/fangwu", //请求路径
cache: false, //(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能，设置为 false 将不缓存此页面。
dataType: "html",//返回值类型 使用json的话也可以，但是需要在JS中编写迭代的html代码，如果格式样式复杂的话还是用html返回类型好
success:function(data){
$("#restinfo").html(data.regBaseHs);
}
});***/
$("#restinfo").load('${ctx}/reg/base/regBaseRestful/display/hxml');
}
function udpataxml(){
$("#updatainfo").load('${ctx}/reg/updata/updataSCDJ1000101xml');
}
</script>
</head>
<body>
<label>请选择省市地区：</label></br>
<select id="seachprov" class="input-medium" name="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"></select>
<select id="seachcity" class="input-medium" name="homecity" onChange="changeCity(this.value,'seachdistrict');"></select>
<span id="seachdistrict_div"><select id="seachdistrict" class="input-medium" name="seachdistrict"></select></span>
<input type="button" class="input-medium" value="获取地区" onClick="showAreaID()"/>
<br>
<br>
<label>Ajax请求返回值：</label></br>
<input type="button" class="input-medium" value="发送请求" onClick="sendAjax()"/></br>
<span id="resultDataType"></span></br>
<span id="resultData"></span>
<br><label>人员信息弹出框：</label>
<br>
<input id="btnOpen" class="btn btn-primary" type="button" onclick="personOpen();" value="人员信息选择添加"/>
<br><label>发送rest请求：</label>
<br>
<input id="sbtnOpen" class="btn btn-primary" type="button" onclick="restxml();" value="发送rest请求,返回xml"/>
<input id="sbtnOpen" class="btn btn-primary" type="button" onclick="restjson();" value="发送rest请求,返回json"/>
<input type="button" value="清除数据" onclick="$('#restinfo').html('')"/>
<div id="restinfo" style="width:800px;height:auto;border:1px solid red;"></div>
<br><label>数据报文生成请求：</label>
<br>
<input id="sbtnOpen" class="btn btn-primary" type="button" onclick="udpataxml();" value="数据报文生成请求"/>
<div id="updatainfo" style="width:800px;height:auto;border:1px solid red;"></div>
</body>
</html>