选中下拉框，隐藏对应的输入框，以及获取每一个数据值。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>下拉框菜单选择</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
</head>
<style type="text/css">
body{
margin-left: 150px;
float:left;
}
label, select, div{
margin-top: 10px;
}
.control-label-coupon{
margin-left: -18px;
}
#control-label-coupon-min{
margin-left: -116px;
}
#control-label-coupon-reduce{
margin-left: -50px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("select option").each(function(){
if($(this).val()=='1'){
$(this).attr("selected","selected");
$("#div_attachment").hide();
$("#div_coupon").hide();
}
});
$(".giftType").bind('change', function(){
if(this.value == "1" || this.value == "2") {
$("#div_attachment").hide();
$("#div_coupon").hide();
} else if (this.value == "3"){
$("#div_attachment").show();
$("#div_coupon").hide();
} else if (this.value == "4"){
$("#div_attachment").hide();
$("#div_coupon").show();
} else {
$("#div_attachment").show();
$("#div_coupon").show();
}
})
});
function getDate() {
var giftPackageNum = $("#giftNum option:selected").val();
var activityNo = $(" input[name='activityNo']").val();
var giftType = $(".giftType option:selected").val();
var areaType = $("#areaType option:selected").val();
var duration = $(" input[name='duration']").val();
var attType = $(" input[name='attType']").val();
var attNum = $(" input[name='attNum']").val();
var couponType = $(" input[name='couponType']").val();
var couponMinAmount = $(" input[name='couponMinAmount']").val();
var couponReduceAmount = $(" input[name='couponReduceAmount']").val();
var couponDiscount = $(" input[name='couponDiscount']").val();
var createTime = $(" input[name='createTime']").val();
var endDate = document.getElementById("createTime").value;
document.writeln("活动编号: " + activityNo + "<br>");
document.writeln("礼包编号: " + giftPackageNum + "<br>");
document.writeln("奖励类型: " + giftType + "<br>");
document.writeln("地区类型: " + areaType + "<br>");
document.writeln("赠送周期: " + duration + "<br>");
document.writeln("大众会员类型: " + attType + "<br>");
document.writeln("大众会员个数: " + attNum + "<br>");
document.writeln("优惠券类型: " + couponType + "<br>");
document.writeln("最低使用金额: " + couponMinAmount + "<br>");
document.writeln("减少金额: " + couponReduceAmount + "<br>");
document.writeln("优惠折扣: " + couponDiscount + "<br>");
document.writeln("添加时间: " + createTime + "<br>");
document.writeln("添加时间: " + endDate + "<br>");
}
</script>
<body>
<form action="" method="post">
<div id="giftPackageNum">
<label class="control-label">礼包编号：</label>
<select id="giftNum" style="width: 10em">
<option id="giftNum1" value=1>礼包一</option>
<option id="giftNum2" value=2>礼包二</option>
<option id="giftNum3" value=3>礼包三</option>
<option id="giftNum4" value=4>礼包四</option>
<option id="giftNum5" value=5>礼包五</option>
<option id="giftNum6" value=6>礼包六</option>
<option id="giftNum7" value=7>礼包七</option>
<option id="giftNum8" value=8>礼包八</option>
<option id="giftNum9" value=9>礼包九</option>
</select>
</div>
<div class="control-group">
<label class="control-label">活动编号：</label>
<input id="activityNo" name="activityNo" type="text"><span><font color="red"> *</font></span>
</div>
<label class="control-label">添加奖励：</label>
<select id="addReward" class="giftType" name="giftType" size="1">
<option id="other" value=0>选择奖励类型</option>
<option id="member" value=1>个人会员</option>
<option id="kumiaoMember" value=2>酷喵会员</option>
<option id="attachment" value=3>大众会员</option>
<option id="coupon" value=4>优惠券</option>
</select>
<div class="control-group">
<label class="control-label">地区类型：</label>
<select id="areaType" name="areaType" size="1">
<option id="country" value=1>全国</option>
<option id="oneProvince" value=2>单省</option>
<option id="noArea" value=0>无地区</option>
</select><span><font color="red"> *</font></span>
</div>
<div class="control-group">
<label class="control-label">赠送周期：</label>
<input id="duration" name="duration" type="text"><span><font color="red"> *</font>
<font color="silver"> 例如：单位:天。15天，30天(1月)</font></span>
</div>
<div id="div_input">
<div id="div_attachment" class="div_attachment">
<div class="control-group-attachment">
<label class="control-label-attachment">大众会员类型：</label>
<input id="attType" name="attType" type="text"><span><font color="red"> *</font>
<font color="silver"> 1</font></span>
</div>
<div class="control-group-attachment">
<label class="control-label-attachment">大众会员个数：</label>
<input id="attNum" name="attNum" type="text"><span><font color="red"> *</font></span>
</div>
</div>
<div id="div_coupon" class="div_coupon">
<div class="control-group-coupon">
<label id="control-label-coupon-type" class="control-label-coupon">优惠券类型：</label>
<input id="couponType" name="couponType" type="text"><span><font color="red"> *</font>
</div>
<div class="control-group-coupon">
<label id="control-label-coupon-min" class="control-label-coupon">最低使用消费金额：</label>
<input id="couponMinAmount" name="couponMinAmount" type="text"><span><font color="red"> *</font>
<font color="silver">单位:元</font></span>
</div>
<div class="control-group-coupon">
<label id="control-label-coupon-reduce" class="control-label-coupon">减少金额：</label>
<input id="couponReduceAmount" name="couponReduceAmount" type="text"><span><font color="red"> *</font>
<font color="silver">单位:元</font></span>
</div>
<div class="control-group-coupon">
<label id="control-label-coupon-discount" class="control-label-coupon">优惠折扣：</label>
<input id="couponDiscount" name="couponDiscount" type="text">
<span><font color="red"> *</font></span>
</div>
</div>
<div class="control-group">
<label class="control-label">添加时间：</label>
<input id="createTime" name="createTime" type="text" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
</div>
</div>
<button onclick="getDate()">提交</button>
</form>
</body>
</html>
效果：
原文链接: https://onlyou.blog.csdn.net//article/details/105993529