三級聯動回顯

本文轉載自查看原文 2020-05-04 13:09 811 三級聯動回顯
  1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2 <%
  3     String path = request.getContextPath();
  4     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
  5             + path + "/";
  6 %>
  7 
  8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  9 <html>
 10 <head>
 11 <base href="<%=basePath%>">
 12 
 13 <title>My JSP 'studentUpdata.jsp' starting page</title>
 14 
 15 <meta http-equiv="pragma" content="no-cache">
 16 <meta http-equiv="cache-control" content="no-cache">
 17 <meta http-equiv="expires" content="0">
 18 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 19 <meta http-equiv="description" content="This is my page">
 20 <!--
 21     <link rel="stylesheet" type="text/css" href="styles.css">
 22     -->
 23 <link rel="stylesheet"
 24     href="./vendor/simple-line-icons/css/simple-line-icons.css">
 25 <link rel="stylesheet"
 26     href="./vendor/font-awesome/css/fontawesome-all.min.css">
 27 <link rel="stylesheet" href="./css/styles.css">
 28 <script src="./vendor/jquery/jquery.min.js"></script>
 29 <script src="./vendor/popper.js/popper.min.js"></script>
 30 <script src="./vendor/bootstrap/js/bootstrap.min.js"></script>
 31 <script src="./vendor/chart.js/chart.min.js"></script>
 32 <script src="./js/carbon.js"></script>
 33 <script src="./js/demo.js"></script>
 34 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 35 <script type="text/javascript">
 36         var address = "";
 37         $(function(){
 38             //ajax 省份
 39             $.ajax({
 40                 url : "SelectCityServlet",
 41                 type : "post",
 42                 data : {
 43                     cid : 1
 44                 },
 45                 dataType : "json",
 46                 success : function(data) {
 47                     $.each(data, function(i, val) {
 48                         $("#sheng").append("<option value='" + this.id + "'>" + this.cityname + "</option>")
 49                     })
 50                 }
 51             });
 52             setTimeout(function() {
 53                 //回顯的ajax獲取內容
 54                 var id=${param.id};
 55                 $.ajax({
 56                     url:"StudentSelectOneServlet",
 57                     type: "post",
 58                     data: {id:id},
 59                     dataType: "json",
 60                     success:function(data){
 61                         $("#pid").val(data.pid);
 62                         $("#name").val(data.name);
 63                         $(":radio").each(function(){
 64                             if($(this).val() == data.sex){
 65                                 $(this).prop("checked",true);
 66                             }
 67                         });
 68                         $("#age").val(data.age);
 69                         $("#team").val(data.team);    
 70                         address = data.add;//地址全局變量
 71                         $("#add").val(data.add);
 72                         $("#sheng option").each(function(){
 73                             if(data.add.indexOf($(this).html())!=-1){
 74                                 $(this).prop("selected",true);
 75                                 ChooseCity($(this).val());//調2級聯動
 76                             }
 77                         });
 78                         /* $("#shi option").each(function(){
 79                             if(data.add.indexOf($(this).html())!=-1){
 80                                 $(this).prop("selected",true);
 81                                 ChooseQu($(this).val())//調3級聯動
 82                             }
 83                         });
 84                         $("#xian option").each(function(){
 85                             if(data.add.indexOf($(this).html())!=-1){
 86                                 $(this).prop("selected",true);
 87                             }
 88                         }); */
 89                     }
 90                 })
 91             }, 500);
 92             
 93         })
 94         var id=<%=request.getParameter("id")%>
 95         function tijiao(){
 96             var num=$("form").serialize();
 97             $.ajax({
 98                 url:"StudentUpdataServlet",
 99                 type: "post",
100                 data: num,//參數
101                 dataType: "text", 
102                 success:function(data){
103                     if(data>0){
104                         alert("修改成功");
105                         parent.location.href="studentxiu.jsp";
106                     }else{
107                         alert("修改失敗");
108                     }
109                 }
110             })
111     }
112     
113     //查id
114     $(function() {
115         
116     });
117 
118 
119     //2級聯動
120     function ChooseCity(id) {
121         if (id != "") {
122             $.ajax({
123                 url : "SelectCityServlet",
124                 data : {
125                     cid : id
126                 },
127                 dataType : "json",
128                 success : function(data) {
129                     //清空之前的城市信息
130                     $("#opt1").siblings().remove();
131                     //添加城市信息
132                     $.each(data, function(i, val) {
133                         if(address.indexOf(this.cityname)!=-1){
134                             $("#shi").append("<option value='" + this.id + "' selected='selected'>" + this.cityname + "</option>")
135                             ChooseQu(this.id);
136                         }else{
137                             $("#shi").append("<option value='" + this.id + "'>" + this.cityname + "</option>")
138                         }
139                     })
140                 }
141             })
142         } else {
143             //清理之前的城市信息
144             $("#opt1").siblings().remove();
145             //清理之前的區 縣信息
146             $("#opt2").siblings().remove();
147         }
148     }
149     //3ji
150     function ChooseQu(id) {
151         if (id != "") {
152             $.ajax({
153                 url : "SelectCityServlet",
154                 data : {
155                     cid : id
156                 },
157                 dataType : "json",
158                 success : function(data) {
159                     //先清理之前的區縣信息
160                     $("#opt2").siblings().remove();
161                     //添加區 信息
162                     //添加城市信息
163                     $.each(data, function(i, val) {
164                         if(address.indexOf(this.cityname)!=-1){
165                             $("#xian").append("<option value='" + this.id + "' selected='selected'>" + this.cityname + "</option>")
166                         }else{
167                             $("#xian").append("<option value='" + this.id + "'>" + this.cityname + "</option>")
168                         }
169                     })
170                 }
171             })
172         } else {
173             //清理之前的區、縣信息
174             $("#opt2").siblings().remove();
175         }
176     }
177     function getAdd() {
178         var pro = $("#sheng option:selected").text();
179         var city = $("#shi option:selected").text();
180         var qu = $("#xian option:selected").text();
181         $("#add").val(pro + "" + city + "" + qu);
182     }
183     </script>
184 </head>
185 
186 <body>
187     
188     <form action="" method="post" id="myform">
189         <div class="container-fluid">
190             <div class="row">
191 
192                 <div class="col-md-10">
193                     <div class="card">
194                         <div class="card-header bg-light">修改學員信息</div>
195 
196                         <div class="card-body">
197                             <div class="row mb-5">
198                                 <div class="col-md-4 mb-4">
199                                     <div>基本信息</div>
200                                 </div>
201 
202                                 <div class="col-md-8">
203                                     <div class="row">
204                                         <div class="col-md-6">
205                                             <div class="form-group">
206                                                 <!-- <label class="form-control-label">學生學號</label> --> <input
207                                                     type="hidden" name="id" value="${param.id}" class="form-control">
208                                             </div>
209                                         </div>
210                                         
211                                         <div class="col-md-6">
212                                             <div class="form-group">
213                                                 <label class="form-control-label">學生編號</label> <input
214                                                     type="text" name="pid" id="pid" class="form-control">
215                                             </div>
216                                         </div>
217                                         
218                                         <div class="col-md-6">
219                                             <div class="form-group">
220                                                 <label class="form-control-label">學生姓名</label> <input
221                                                     type="text" name="name" id="name" class="form-control">
222                                             </div>
223                                         </div>
224                                     </div>
225 
226                                     <div class="row">
227                                         <div class="col-md-6">
228                                             <div class="form-group">
229                                                 學生性別:<input type="radio" name="sex" value="男">男 <input
230                                                     type="radio" name="sex" value="女">女<span id="sex"></span>
231                                             </div>
232                                         </div>
233                                     </div>
234 
235                                     <div class="row">
236                                         <div class="col-md-6">
237                                             <div class="form-group">
238                                                 <label class="form-control-label">學生年齡</label> <input
239                                                     type="text" name="age" id="age" class="form-control">
240                                             </div>
241                                         </div>
242                                         <div class="col-md-6">
243 
244                                             <div class="form-group">
245                                                 <label for="single-select">學員小組</label> <select id="team"
246                                                     name="team" class="form-control">
247                                                     <option value="">請選擇小組</option>
248                                                     <option value="1">1</option>
249                                                     <option value="2">2</option>
250                                                     <option value="3">3</option>
251                                                     <option value="4">4</option>
252                                                 </select>
253                                             </div>
254                                         </div>
255                                     </div>
256                                 </div>
257                             </div>
258 
259                             <hr>
260 
261                             <div class="row mt-5">
262                                 <div class="col-md-4 mb-4">
263                                     <div>家庭住址</div>
264                                 </div>
265 
266                                 <div class="col-md-8">
267                                     <div class="form-group">
268                                         <label class="form-control-label"></label><br>省份<select
269                                             id="sheng" class="form-control"
270                                             onchange="ChooseCity(this.value)">
271                                             <option value="">請選擇省份</option>
272                                         </select> 城市<select class="form-control" id="shi"
273                                             onchange="ChooseQu(this.value)">
274                                             <option value="" id="opt1">請選擇城市</option>
275                                         </select> 區縣<select class="form-control" id="xian" onchange="getAdd()">
276                                             <option value="" id="opt2">請選擇區縣</option>
277                                         </select> <input type="hidden" name="add" id="add" value="">
278                                     </div>
279                                 </div>
280                             </div>
281                         </div>
282                         <div class="card-footer bg-light text-right">
283                             <input type="button" onclick="tijiao()" class="btn btn-primary"
284                                 value="提交">
285                         </div>
286                     </div>
287                 </div>
288             </div>
289         </div>
290     </form>
291     
292 </body>
293 </html>
免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找 關於element-ui級聯菜單（城市三級聯動菜單）和回顯問題 mvc關於三級聯動修改時數據回顯 spring Mvc 二級聯動回顯（1） angularjs三級聯動 vuejs 三級聯動 webForm（三）——三級聯動基於elementUI中級聯選擇器( el-cascader )，完成省市區三級聯動並回顯---更新 angularjs select 三級聯動 bootstrap省市縣三級聯動小程序的三級聯動