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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.