jQuery HTML select toggle/show/hide
I need to hide an 'Other' label and corresponding input field as default. Then when a user selects 'Other开发者_开发百科' from a HTML select drop down the matching label and text input need to show. If they navigate to a different option then the label and text input are hidden again:
HTML:
<select id="indTitle" class="inlineSpace">
<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="indOther" class="inlineSpace">Other</label>
<input type="text" class="text" name="indOther" id="indOther" maxlength="20" />
$('#indTitle').change(function() {
if($(this).val() == 'Other') {
$('label[for=indOther], #indOther').show();
} else {
$('label[for=indOther], #indOther').hide();
}
});
精彩评论