jQuery show hide multiple 'Other' input fields

jQuery show hide multiple 'Other' input fields

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 Other input fields show. How do i make this exclusive without repeating the jQuery for the seperate instances?

  1. // 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;
     }
     
     });

    });





















  1. <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>