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

时间:2017-02-01 20:00:39

标签: javascript jquery html asp.net-mvc razor

我有三个下拉列表集,其中三个单独的输入显示在从列表中选择值“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的输入,该输入包含一个带有其他值的单击选项

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

问题在于它不仅仅选择列表中的下一个项目,而是在选择时打开所有隐藏的输入。非常感谢任何帮助

1 个答案:

答案 0 :(得分:2)

所有DropDowns都有类.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