jquery - SlideDown working, SlideUp refusing -

i have problem hiding attribute field based on selection attribute field.

since there lack of doing easier, thought of adding jquery code in footer block.

i try explain current situation possible.

i have selection field being generated this:

<select id="edit-attributes-4" class="form-select ajax-processed" name="attributes[4]"> <option selected="selected" value="12">   verzenden, €15.44 </option><option value="13">   ophalen, €8.03 </option></select> 

and this:

<select id="edit-attributes-5" class="form-select ajax-processed" name="attributes[5]"> <option selected="selected" value="14">   1 fles, €15.44 </option><option value="15">   1 doos, €92.64 </option></select> 

i want field edit-attribute-4 hidden on page load, added in css code wich in same footer block:

#edit-attributes-4 {      display:none;      clear: both; } 

the clear both suggestion google findings slideup not working, unsure didnt make difference anyways, @ least hiding work on page load.

this bit jquery code wich in footer block:

 $(document).ready(function(){      $("#edit-attributes-5").change(function(){           if ($(#edit-attributes-5).val() == "15" ) {              $("#edit-attributes-4").slidedown("fast")           } else {               $("#edit-attributes-4").slideup("fast")          }      });  }); 

basicly happpends, , works fine, whenever attribute field 5 changed value 15, wich buy 1 dozen instead of 1 single product, shows attribute field 4 able select value 13 wich gives discount picking instead of shipping customer.

this works should , whenever select value 15 in field 5, field 4 pops , able select in it, however, when select value 14 in field 5, field 4 not go hiding.

basicly want achieve have 2 cloned fields sending or shipping, in wich 1 has discount in selecting dozen instead of single product. prevent people ordering 1 single product while putting form 4 value 13 , same discount on if chose come , dozen @ store , not having shipped them, wich discount about. hope makes sense.

can shed light why not working should? why not going hiding? missing here? not jquery alot might obvious. if there easier alternatives im open suggestions.

thanks in advance,

kevin

update: http://jsfiddle.net/zhmss/ fiddle seems work charm.. on product page keeps failing, when

if ($(#edit-attributes-5).val() == "15" ) { 

is changed to:

if ($(this).val() == "15" ) { 

something must breaking it? have tried using jquery update on drupal , select jquery v1.5, v1.7 , v1.8, none of them make difference.

the page in question: http://italvin.arclyse.net/?q=producten&w=rode%20wijn&s=all&wh=all&d=all

if in drupal, have structure jquery bit differently. drupal uses behaviors system ensures javascript code runs whenever content added via ajax. right now, jquery function never run, because document "ready" before form loaded.

here reference working javascript in drupal

here's typical way of attaching behaviors in drupal:

(function ($, drupal, window, document, undefined) {      drupal.behaviors.selectionhandlers = {         attach: function( context, settings ) {               $("#edit-attributes-5").once("select-handler", function() {                    $(this).change(function(){                       if ($("#edit-attributes-5").val() == "15" ) {                            $("#edit-attributes-4").slidedown("fast")                       } else {                            $("#edit-attributes-4").slideup("fast")                       }                   });              });          }      }  })(jquery, drupal, this, this.document); 

adding behavior says "run code when new content added page".

the once() call ensures code runs when content added, , not when other content added.