僅選擇Html.dropdownlist之外的最近輸入

Question

我有三個dropdownlistfor集，其中包含三個單獨的輸入，這些輸入在從列表中選擇值“ other”時顯示。 以下代碼僅用於選擇與單擊的項目最接近的輸入。

    Set 1
              @Html.DropDownListFor(m => m.Title, "--Select Title --", new { @class = "form-control requiredField dropListFunction", required="true" })

    set2
                @Html.TextBoxFor(m => m.TitleOther, new { @class = "form-control hidden", placeholder = "Enter New Title" }) 

              @Html.DropDownListFor(m => m.Branch "--Select Branch --", new { @class = "form-control requiredField dropListFunction", required = "true" })

         @Html.TextBoxFor(m => m.BranchOther, new { @class = "form-control hidden", placeholder = "Enter New Branch" })  

Set 3   
        @Html.DropDownListFor(m => m.State, Enum.GetNames(typeof(State)).Select(e => new SelectListItem { Text = e }), "--Select State --", new { @class = "form-control requiredField dropListFunction", required = "true" })

 @Html.TextBoxFor(m => m.StateOther, new { @class = "form-control hidden", placeholder = "Enter New State" })

以下jquery處理最接近dropListFunction的輸入的選擇，其中包含具有其他值的clicked選項

   $('option[value=Other]').on('click',function(){
            var nextInput = $('.dropListFunction').next('input');
            nextInput.removeClass('hidden')
        });

問題在於它不只是選擇列表中的下一個項目，而是在選擇時打開所有隱藏的輸入。 任何幫助是極大的贊賞

Answer 1

您所有的DropDown都具有.dropListFunction類，因此您將獲得所有后續輸入。

$('.dropListFunction').on('change', function(e){
    var dd = $(e.target), input = dd.next('input');
    if(dd.val() === 'other'){
      input.removeClass('hidden');
    }else{
      input.addClass('hidden');
    }
  });

在這里看到jsbin

https://jsbin.com/lacimoyula/edit?html，控制台，輸出