天天看點

根據下拉選項顯示/隐藏 某些字段(select上綁定onchange事件)

今天做了一張表單,有個小需求。下面支付方式有兩種,當是銀行存款的時候,頁面是目前這樣的,當是貨存現金的時候,下面的“收款方戶名”、“收款方銀行賬号”、“收款方開戶行”。思路有幾種,這裡隻列舉一種簡單的。

根據下拉選項顯示/隐藏 某些字段(select上綁定onchange事件)

我采用的是onchange事件,找到selecr的id,這裡是:(本架構path屬性同id)

                  <c:if test="${claim.status=='DRAFT'}">

                        <form:select path="payTypeName" class="form-control" >

                            <form:option value="銀行存款" label="銀行存款"></form:option>

                            <form:option value="庫存現金" label="庫存現金"></form:option>

                        </form:select>

                    </c:if>

在頁面剛加載的時候,寫:

       $('#payTypeName').change(function(){

            var optionContent= $(this).children('option:selected').val();

            if(optionContent=="庫存現金"){

                $("#acc_name").css("display","none");

                $("#pay_ReceiveObjBankAcc").css("display","none");

                $("#pay_ReceiveObjBank").css("display","none");

            }if(optionContent=="銀行存款"){

                $("#acc_name").css("display","");

                $("#pay_ReceiveObjBankAcc").css("display","");

                $("#pay_ReceiveObjBank").css("display","");

            }

         });

放在$(document).ready(function(){}内!!