前端页面根据select标签变化 展示或隐藏 指定区域

场景

在开发票时，纸质专票需要邮寄，就需要填写收件人、地址、联系电话等信息。但是电子发票是不需要填写这些信息的，所以需要实现选择电子发票时隐藏这些信息填写框，在选择纸质专票时展示这些信息填写框。

代码实现

1.select标签添加onchange事件

<div class="input-group">
     <div class="input-group-addon"><span style="color: #e60012;">*</span>发票类型：</div>
     <select name="invoiceType" id="invoiceTypeFill" class="form-control" onchange="showRecipientInfo()">
             <option value="1" selected>电子普票</option>
             <option value="3">纸质专票</option>
     </select>
</div>

2.指定需要隐藏或展示的区域

3.根据select标签的变化展示或者隐藏指定区域（可以在初始方法中指定这块区域是展示还是隐藏，我这里默认是电子发票所以是隐藏的）

function showRecipientInfo() {
        if ($("#invoiceTypeFill").val() == 1) {
            $("#recipient1").hide();
            $("#recipient2").hide();
        }else if ($("#invoiceTypeFill").val() == 3) {
            $("#recipient1").show();
            $("#recipient2").show();
        }
}

4.实现效果

总结

利用onchange()事件，实现下拉选项变化，div区域也展示或隐藏的效果。