Javascript hide and show form not working

Couple problems:

1. You'll either need to wrap the function in $(function(){}) to ensure DOM is ready, or drop it below your HTML (the former is recommended). If you don't wrap it (or drop it), then the script is executed before the elements have actually been rendered, causing $('#rule-type') to be undefined.
2. Your logic is incorrect (according to your explanation). Your current logic says to hide the input box when anything other than tid and acc is selected.

Working version:

<script> $(function(){ $('#rule-type').change(function() { var val = $(this).val(); if (val == 'tid and acc') { $('#tid-acc').hide(); } else { $('#tid-acc').show(); } }); }); </script> <select id="rule-type"> <option value="" selected="selected">None</option> <option value="tid">tid</option> <option value="tid and acc">tid and acc</option> <option value="xid">xid</option> </select> <input id="tid-acc" /> 

http://jsfiddle.net/dbrecht/QwkKf/

Take a look here for a working sample: http://jsfiddle.net/Mm7c7/1/

HTML:

<select id="rule-type"> <option value="" selected="selected">None</option> <option value="tid">tid</option> <option value="tid and acc">tid and acc</option> <option value="xid">xid</option> </select> <input id="tid-acc"> 

Javascript:

 $('#rule-type').change(function() { var val = $(this).val(); if (val == 'tid and acc') { $('#tid-acc').show(); } else { $('#tid-acc').hide(); } });