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

Question

我有三个集合的下拉列表，其中三个单独的输入在从列表中选择值“其他”时显示。以下代码旨在仅选择与所单击的项目最接近的输入。

    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 的输入的选择，其中包含具有其他值的单击选项

   $('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,console,output