jquery选择下拉框触发事件的实现及值的获取_$('#divattachment').hide();-CSDN博客

本文链接：https://blog.csdn.net/zuihongyan518/article/details/105993529
选中下拉框，隐藏对应的输入框，以及获取每一个数据值。
<%@ 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">&nbsp;*</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">&nbsp;*</font></span>
    </div>
    <div class="control-group">
        <label class="control-label">赠送周期：</label>
        <input id="duration" name="duration" type="text"><span><font color="red">&nbsp;*</font>
            <font color="silver">&ensp;例如：单位:天。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">&nbsp;*</font>
                <font color="silver">&ensp;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">&nbsp;*</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">&nbsp;*</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">&nbsp;*</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">&nbsp;*</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">&nbsp;*</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>
效果：