效果图:
当下拉框改变的时候,添加一个成人填写信息或儿童填写信息!
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.3.js">
<style type="text/css">
*{
font-size:12px;
}
#dFlightContent1 {
width: 704px;
height:auto;
border-bottom: 1px solid #B0CAED;
border-left: 1px solid #B0CAED;
border-right: 1px solid #B0CAED;
overflow: hidden;
}
.w_tt {
font-size:14px;
color:#006699;
margin:0px 4px;
}
.w_tit {
width:85px;
text-align:right;
}
.w_uinfo {
width:500px;
margin:5px 20px 10px;
}
.w_uinfo input {
height:18px;
border:solid 1px #999999;
}
</style>
<script language="javascript">
//添加成人
function addAdult(){
var selAdult = $("#SelectAdult");
var tabtrCss = $(".tabtr");
var selValue = selAdult.val();
var addStr = "<tr class='tabtr'><td><table><tr height='30px'><td class='w_tit'>乘客姓名:</td><td colspan='2'><input type='text' name='userName' /></td></tr><tr height='30px'><td class='w_tit'>证件号:</td><td><input type='text' name='papersNum' /></td><td class='w_tit'>证件类型:</td><td><select name='paper' id='paper'><option value='1'>身份证</option><option value='2'>护照</option><option value='3'>军官证</option><option value='4'>其它</option></select></td></tr></table></td></tr>";
tabtrCss.remove();
for(var i=1;i<=selValue;i++){
$("#adult").append(addStr);
}
}
//添加儿童
function addChildren(){
var selChild = $("#SelectChildren");
var children = $(".children");
var selValue = selChild.val();
var addStr = "<tr class='children'><td><table><tr height='30px'><td class='w_tit'>乘客姓名:</td><td colspan='2'><input type='text' name='userName' /></td></tr><tr height='30px'><td class='w_tit'>证件号:</td><td><input type='text' name='papersNum' /></td><td class='w_tit'>证件类型:</td><td><select name='paper' id='paper'><option value='1'>身份证</option><option value='2'>出生日期</option><option value='3'>其它</option></select></td></tr></table></td></tr>";
children.remove();
for(var i = 1;i<=selValue;i++){
$("#child").append(addStr);
}
}
</script>
</head>
<body>
<div id="dFlightContent1" class="ct">
<table cellpadding="0px" cellspacing="0px" border="0px" class="w_uinfo" id="adult">
<tr height="40px">
<td colspan="4"><img src="/UploadFiles/2021-04-02/06.png">
<select name="SelectAdult" id="SelectAdult" onchange="addAdult()">
<option value="1">1人</option>
<option value="2">2人</option>
<option value="3">3人</option>
<option value="4">4人</option>
<option value="5">5人</option>
</select></td>
</tr>
<tr class="tabtr">
<td><table>
<tr height="30px">
<td class="w_tit">乘客姓名:</td>
<td colspan="2"><input type="text" name="userName" /></td>
</tr>
<tr height="30px">
<td class="w_tit">证件号:</td>
<td><input type="text" name="papersNum" /></td>
<td class="w_tit">证件类型:</td>
<td><select name="paper" id="paper">
<option value="1">身份证</option>
<option value="2">护照</option>
<option value="3">军官证</option>
<option value="4">其它</option>
</select></td>
</tr>
</table></td>
</tr>
</table>
<table cellpadding="0px" cellspacing="0px" border="0px" class="w_uinfo" id="child">
<tr height="40px">
<td colspan="4"><img src="/UploadFiles/2021-04-02/06.png">
<select name="SelectChildren" id="SelectChildren" onchange="addChildren()">
<option value="0">0人</option>
<option value="1">1人</option>
<option value="2">2人</option>
</select></td>
</tr>
</table>
<table cellpadding="0px" cellspacing="0px" border="0px" class="w_uinfo">
<tr height="40px">
<td class="w_tit">联系人姓名:</td>
<td><input type="text" name="userName" /></td>
<td class="w_tit">联系方式:</td>
<td><input type="text" name="tel" /></td>
</tr>
<tr height="40px" align="center">
<td colspan="4"><img src="/UploadFiles/2021-04-02/tijiao.jpg">
</tr>
</table>
</div>
</body>
</html>
JavaScript代码还有可优化的,儿童和成人下拉框改变天津添加的信息是一样的!可以只定义一个变量,两个函数共同使用!
下拉框
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?