Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/hide multiple 'Other' input fields based on value of associated Select drop down

    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?

    Code:
    // 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;
    		}
    			
    	});
    
    });
    And here is the HTML sample:

    Code:
    <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
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    next() should do it. As in:
    Code:
    $(this).next('input.jOther').show();


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •