jQuery show hide multiple 'Other' input fields

JavaScript
1

Hi,

Am having some jQuery troubles whereby i have some jQuery that toggles an ‘Other’ HTML input field and associated label when a user selects the value Other from a HTML select drop down. I have this working for one field but the application i am building has increased in scope whereby there may be multiple instances of members on one page so the Other option will be there multiple times.

At the moment if a user selects Other from one drop down all Otehr input fields show. How do i make this exclusive without repeating the jQuery for the seperate instances?

// Show/Hide 'Other'
$(document).ready(function() {

	$('.jOther').hide();
	
	$('.jTitle').change(function() {
		
		var $index = $('.jTitle').index(this);
		
		alert($index);
		
		if($('.jTitle').val() != 'Other') {
			$('.jOther').hide();
		} 
		else {
			$('.jOther').show();
		
			window.location.hash = 'Other' + $index;
		}
			
	});

});

						<td>
							<select id="title" class="inlineSpace jTitle">
								<option value="Please select">Please select...</option>
								<option value="Mr">Mr</option>
								<option value="Mrs">Mrs</option>
								<option value="Ms">Ms</option>
								<option value="Miss">Miss</option>
								<option value="Dr">Dr</option>
								<option value="Other">Other</option>
							</select>
							<label for="other" class="inlineSpace jOther">Other</label>
							<input type="text" class="text jOther" name="other" id="other" maxlength="6" />
						</td>
2

One approach would be to use a selector that will isolate the correct elements based on the dom structure. Instead of having your selector select from all elements in the document, you need to specify a smaller, more specific subset of elements.

For example, traverse from the select up to the lowest common parent element, in your example that would be the td element, and then select the proper descendants of it. see closest() and then find()

Or maybe you could just use the siblings() of the select.

If the dom structure isn’t consistent throughout your page, you might have trouble creating a single selector that works for all of your cases. You could create a map using an object. Put the id of the select element as the object property, and the value could be an array if id’s to hide, or the value could even just be a selector. Since you will know the id of the element that fired the change event, you can use that to lookup the value in the map.

3

Hi.

thanks for the advice.

I ended up with this:

	// event listener on all select drop downs with class of jTitle	
	$("slect.jTitle").change(function(){
		
		//set the select value
		var $titleVal = $(this).val();
		
		if($titleVal != "Other") {
			$(this).parent().find(".jOther").hide();
		} else {
			$(this).parent().find(".jOther").show();
		}
		
		// Sets a cookie with named after the title field's ID attribute 
		$(this).cookify();
		
	});