仅选择Html.dropdownlist之外的最近输入

Question

I have three dropdownlistfor sets, with three separate inputs that are shown on selecting the value "other" from the list. The following code is meant to select only the closest input to the item that was clicked.

    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" })

with the following jquery handling selection of the input closest to the dropListFunction that contains a clicked option with value other

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

The problem is that it is not selecting just the next item in the list, but opening all hidden inputs when selected. Any help is greatly appreciated

Answer 1

All your DropDowns have the class .dropListFunction so you will get all the next inputs.

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

see jsbin here

https://jsbin.com/lacimoyula/edit?html,console,output