jsp代碼如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link type="text/css" rel="stylesheet" href="https://bbs.csdn.net/topics/css/H-ui.css" />
<link type="text/css" rel="stylesheet" href="https://bbs.csdn.net/topics/css/H-ui.admin.css" />
<link type="text/css" rel="stylesheet" href="https://bbs.csdn.net/topics/font/font-awesome.min.css" />
<title>添加房間</title>
<style>
body {
min-height: 200px;
font-size: 14px;
}
td, th {
font-size: 14px;
}
input[type="text"] {
padding: 5px 5px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="pd-20">
<div class="Huiform">
<form action="/HotelManagement/AddRoomServlet" method="post">
<table class="table table-bg">
<tbody>
<tr>
<th width="100" class="text-r"><span class="c-red">*</span>房間號</th>
<td>
<table id="optionlist">
</table>
<div>
<input type="button" id="bt1" value="https://bbs.csdn.net/topics/添加房間" onClick="addrows()">
<input type="button" id="bt2" value="https://bbs.csdn.net/topics/洗掉房間" onClick="deleterow()">
</div>
</td>
</tr>
<tr>
<th class="text-r"><span class="c-red">*</span> 房間型別：</th>
<td><select name="roomtype" id="roomtype"
onchange="optionChange()">
<c:forEach items="${list1}" var="roomtype">
<option value="https://bbs.csdn.net/topics/${roomtype.typeName}">${roomtype.typeName}</option>
</c:forEach>
</select></td>
<tr>
<th class="text-r"><span class="c-red">*</span> 房間狀態：</th>
<td><label> <input name="state" type="radio"
id="state_1" value="https://bbs.csdn.net/topics/true" checked> 有人
</label> <label> <input type="radio" name="state" value="https://bbs.csdn.net/topics/false"
id="state_0"> 無人
</label></td>
</tr>
<tr>
<th class="text-r"><span class="c-red">*</span> 房間樓層：</th>
<td><select name="location">
<option value="https://bbs.csdn.net/topics/一樓">一樓</option>
<option value="https://bbs.csdn.net/topics/二樓">二樓</option>
<option value="https://bbs.csdn.net/topics/三樓">三樓</option>
<option value="https://bbs.csdn.net/topics/四樓">四樓</option>
<option value="https://bbs.csdn.net/topics/五樓">五樓</option>
</select></td>
</tr>
<tr>
<th class="text-r"><span class="c-red">*</span> 房間床數：</th>
<td><select name="roombedNum" id="roombedNum">
<!-- <c:forEach items="${listprice}" var="roomprice">
<option value="https://bbs.csdn.net/topics/${roomprice.price}">${roomprice.price}</option>
</c:forEach>
<option value=""></option> -->
</select></td>
</tr>
<tr>
<th class="text-r"><span class="c-red">*</span> 房間價格：</th>
<td><select name="roomprice" id="roomprice">
</select></td>
</tr>
<tr>
<th class="text-r">備注：</th>
<td><textarea class="input-text" name="room-note"
id="room-note" style="height: 100px; width: 300px;">添加房間備注資訊</textarea></td>
</tr>
<tr>
<th></th>
<td><button class="btn btn-success radius" type="submit">
<i class="icon-ok"></i> 確定
</button>
<button class="btn btn-danger radius" type="reset">
<i class="icon-remove"></i> 重置
</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<script type="text/javascript" src="https://bbs.csdn.net/topics/js/jquery.min.js"></script>
<script type="text/javascript" src="https://bbs.csdn.net/topics/js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript" src="https://bbs.csdn.net/topics/js/H-ui.js"></script>
<script type="text/javascript" src="https://bbs.csdn.net/topics/js/H-ui.admin.js"></script>
<script type="text/javascript">
function addrows() {
$("#optionlist").append("<input type='text' name='roomid' id='roomid' size='10' />");
}
function deleterow() {
var len = optionlist.rows.length;
if (len <= 1) {
alert("至少要有一個選項");
} else {
optionlist.deleteRow(len - 1);//洗掉最后一項
}
}
function getOptionCount() {
return optionlist.rows.length;
}
function optionChange() {
var xmlhttp;
var roomtype_typeName = roomtype.value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var returnJSONString = xmlhttp.responseText;
var returnJSON = JSON.parse(returnJSONString);
var showString = "";
//在每次向下拉框中加入資訊是先清空下拉框
$("#roombedNum").empty();
$("#roomprice").empty();
$("#roombedNum").append(
"<option value='"+returnJSON[0].bednum+"'>"
+ returnJSON[0].bednum + "</option>")
//回圈的想下拉框中加入房間價格
for (var i = 0; i < returnJSON.length; i++) {
$("#roomprice").append(
"<option value='"+returnJSON[i].price+"'>"
+ returnJSON[i].price + "</option>")
}
}
}
xmlhttp.open("post", "/HotelManagement/AddRoomAjaxServlet", true);
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.send("roomtype_typeName=" + roomtype_typeName);
}
$(".Huiform").Validform();
</script>
</body>
</html>
uj5u.com熱心網友回復：
還有addrows()和deleterows(),洗掉optionlist最后一項總是失敗轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/55173.html
標籤：Web 開發
上一篇：寫一個超級簡單的代碼