Show Form Field if Drop Down Item is Selected Using jquery
forms, jquery
Solution
There you go: http://jsfiddle.net/ecZrE/
You mixed up some things in the selectors. Use
$('p select[name=Browser]')
instead of
$('form select[name=Browser]')
since there is no form element. But your snippet is incomplete anyway.
Another wrong selector is
$('form select option:selected')
because you forgot to specify the select element.
Problem
I'm trying to create a dropdown field where if the "Other" item is selected, then a "Please Specify" text box appears. The below works with just one dropdown select field, but as soon as I add the second select field, it no longer works. Here's what I have that doesn't seem to work: CSS... ``` #techother{display:none;} #lmsother{display:none;} ``` Body... ``` <p>Chose Your Browser: <select name = "Browser" required> <option value = "">-- Select an Option --</option> <option value = "1">IE</option> <option value = "2">FF</option> <option value = "3">Safari</option> <option value = "4">Opera</option> <option value = "5">Other</option> </select> </p> <div id="browserother"> <p>Please Specify: <label id="browserlabel"><input name="Other Browser" type="text" placeholder="Other Browser" size="50" /></label></p> </div> <p>Operating System: <select name = "OS" required> <option value = "">-- Select an Option --</option> <option value = "Win">Windows</option> <option value = "ios">iOS</option> <option value = "otheros">Other</option> </select> </p> <div id="osother"> <p>Please Specify: <label id="oslabel"><input name="Other OS" type="text" placeholder="Other OS" size="50" /></label></p> </div> ``` Script... ``` <script> $('form select[name=Browser]').change(function(){ if ($('form select option:selected').val() == '5'){ $('#browserother').show(); }else{ $('#browserother').hide(); } }); $('form select[name=OS]').change(function(){ if ($('form select option:selected').val() == 'otheros'){ $('#osother').show(); }else{ $('#osother').hide(); } }); </script> ``` Any way to make this work? Thanks!