Dropdown the shows a div only works first time
I have a dropdown with a list of "Reason" options.
When the user selects "Other", a text box should appear that requires the user to enter a custom reason. If they choose an option other than "Other", the box should disappear.
It works perfectly... but only once. After the first time, the "Other" option does not make the text box appear at all.
Any ideas??
Here is my code:
-
buildReasonDiv: function(data, panelMembershipUID) {
var html = '<div class="reasonDiv">';
html += '<span><strong>Exception Reason</strong></span><br/>';
html += '<select id="reason" name="reason" onchange="$(this).showReasonTextField(this.options[this.selectedIndex].value)">';
$(data).find("exceptionType").each(function(i) {
html += '<option value="' + $(this).find("name").text() + '">' + $(this).find("name").text() + '</option>';
});
html += '</select><br />';
html += '<input id="reasonFreeText" style="display:none" />';
html += '<input type="submit" onclick="$(this).parents(\'.reasonDiv\').addReason(' + panelMembershipUID + ',reason.options[reason.selectedIndex].value,reasonFreeText.value,\'' + checkbox.id + '\')" value="Add Exception"/>';
html += '</div>';
return html;
},
//show reason free text field when Other option is chosen and hide it when a different option is chosen
showReasonTextField: function(currentValue) {
if (currentValue == 'Other') {
$('#reasonFreeText').show("slow").focus();
} else {
$('#reasonFreeText').hide("show");
}
}