show input box based on select value
I have the following code doing ALMOST what I want. It shows an input field when the select value is "dropped". The problem I am having is that if I select "dropped" it will display the input field, but if i select a different value AFTER selecting "dropped" the input field is sill displaying. How would I get it to hide the input field if it is NOT selected?
Thanks for any help!
<!--SHOW/HIDE DIV-->
<script type="text/javascript">
$(document).ready(function(){
$('#dropped').hide();
$("#thechoices").change(function(){
$("#" + this.value).show().siblings().hide();
});
$("#thechoices").change();
});
</script>
<!--END SHOW/HIDE DIV-->
<form id="form" name="form" method="GET" action="">
<input type="hidden" name="action" value="set">
<input type="hidden" name="load_number" value="<?php echo $load_number ?>">
<h1>Load Status Form</h1>
<p>Use this form to update load status</p>
<label><em>*</em> Load Status<span class="small">Select a load status</span></label>
<select id="thechoices" name="load_status">
<option value="" selected></option>
<option value="available"<?php if($load_status=='available') { print "selected"; } ?>>Available</option>
<option value="in route"<?php if($load_status=='in route') { print "selected"; } ?>>In Route</option>
<option value="dropped"<?php if($load_status=='dropped') { print "selected"; } ?>>Dropped</option>
<option value="delivered"<?php if($load_status=='delivered') { print "selected"; } ?>>Delivered</option>
</select>
<div style="clear:both;"></div>
<div id="dropped">
<label><em>*</em> Location<span class="small">Enter drop location</span></label>
<input type='text' name='drop_location' size='20' value="">
</div>
<button type="submit">Submit</button>
</form>