javascript - Displaying a div based on a dropdown selection -

i have part of jsp code :

<div> <label>choose type of procedure want :</label><select id="proc-type"> <option value="with-param">with parameters</option> <option value="without-param">without parameters</option> </select> </div> 

now, if user chooses parameters, following div should displayed :

<div class="drop" id="drop"> <label> select procedure (without parameters) : </label> <select id="combobox" name="combobox"> <option>proc 1</option> <option>proc 2</option> </select> 

and, if without parameters, should displayed

<div class="drop" id="drop"> <label> select procedure (without parameters) : </label> <select id="combobox" name="combobox"> <option>proc 3</option> <option>proc 4</option> </select> <label>parameter : </label> <textarea rows=1 cols=30 ></textarea> <br> <label>parameter : </label> <textarea rows=1 cols=30 ></textarea> <br> </div> 

i've tried jquery code :

$(document).ready(function () { $(".dropdown").hide(); $(".drop").hide(); $("#proc-type").change( function(){     var opt="";      opt= $parseint($("select option: selected").val());      if(opt == "with-param"){         ("#dropdown").show(700);     }     else {         ("#drop").show(700);     } }); }); 

but doesn't seem work.can suggest me how ?

the standard javascript function parseint, not $parseint. and, understand, don't need - val() returns string value.

also, value <select>, can call val() on directly. so, line becomes:

opt = $(this).val(); 

since this becomes element on event happened - select itself.

at last, might want hide() other div after showing correct one, in case user changes mind.