hide show input field based on select option value chosen
Hello all,
I hope that I am in the right area for this post.
I am trying to use jquery based on a user select list. When a user chooses the "other" option they should be able to input a new selection value. The input put box is not being hidden even though other has not been chosen.
Anyway, here is the code that I have put together.
TIA,
Peter
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="el" xml:lang="el">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
// for hide - display field based on select
$(document).ready(function() {
$.viewInput = {
'other' : $([]),
//THIS IS THE NAME OF THE DIV WRAPPING THE HIDDEN FIELD
'otherField' : $('#otherField'),
};
$('#101').change(function() {
// HIDES THE INPUT FIELD IF ANOTHER DROPDOWN ITEM IS SELECTED ONCE THE HIDDEN FIELD IS LOADED
$.each($.viewInput, function() { this.hide(); });
// SHOWS THE INPUT FIELD ITEM IF SELECTED
$.viewInput[$(this).val()].show();
});
});
</script>
</head>
<body>
<div id="101">
<select id="101" name="101" class="dropdown" title="use <b>other</b> to add new item" >
<option value=" ">Select feeling</option>
<option value="Euphoric">Euphoric</option>
<option value="Ecstatic">Ecstatic</option>
<option value="Normal">Normal</option>
<option value="Depressed">Depressed</option>
<option value="Unhinged">Unhinged</option>
<option value="Deranged">Deranged</option>
<option value="other">Other...</option>
</select>
<div id="otherField">
<input type="text" id="101" name="101" size="3" class="textfield" />
</div>
</div>
</body>
</html>