JQuery show input box based on select value

[dschuett]

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!

<script type="text/javascript">
$(document).ready(function(){
	$('#dropped').hide();
	$("#thechoices").change(function(){
	$("#" + this.value).show().siblings().hide();
	});
	$("#thechoices").change();
});
</script>


<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><font style="color:#0066cc;">*</font> 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 id="dropped">
	<label><font style="color:#0066cc;">*</font> Location<span class="small">Enter drop location</span></label>
	<input type='text' name='location' size='20' value="">
</div>
<button type="submit">Submit</button>
</form>

[Airshow]

I think the problem is that when $("#" + this.value) selects nothing, then (by definition) no siblings are available to be found, so this approach will never work for the first (null) option, even when all the "available", "in route", "dropped", "delivered" divs are in place.

You have to think of another way to select the unwanted divs in the set. eg, give all the divs in the set the same class (class="theChoicesDivs") then show/hide with:

$("#thechoices").change(function(){
  $('.theChoicesDivs').hide().filter("#" + this.value).show();
});

(untested)

Airshow