JQuery how to produce more form fields based on selected option tags

[sufer]

I'm building a web form and I want to be able to allow users to select an option from a dropdown menu and depending on which value they choose, a div containing more fields related to that option will be produce. I have successfully implemented this code with a single option for another project. I recycled the code for this project and modified it to accommodate multiple options but so far I have had no success in getting a working product running.Here's some source code I've been working with to illustrate my point. JQuery script\[code\] $(document).ready(function(){ $("#more_info_bus").hide(); $("#more_info_bus").attr("disabled", "disabled"); $("#more_info_train").hide(); $("#more_info_train").attr("disabled", "disabled"); $("#more_info_tram").hide(); $("#more_info_tram").attr("disabled", "disabled"); $("#transport_type").change(function(){ var val = $(this).val; $("#more_info_bus input").attr("enabled",(val=="Bus")?"":"enabled"); (val=="Bus")?$("#more_info_bus").show():$("#more_info_bus").hide(); $("#more_info_train input").attr("enabled",(val=="Train")?"":"enabled"); (val=="Train")?$("#more_info_train").show():$("#more_info_train").hide(); $("#more_info_tram input").attr("enabled",(val=="Tram")?"":"enabled"); (val=="Tram")?$("#more_info_tram").show():$("#more_info_tram").hide(); }); });\[/code\]HTML code (shortened to two divs instead of all the options but you get the idea\[code\] <label>Is the venue accessible by public transport via:</label> <br /> <select name="transport_type" id="transport_type"> <option disabled selected>Please select a transport type...</option> <option value="http://stackoverflow.com/questions/15812526/Bus">Bus</option> <option value="http://stackoverflow.com/questions/15812526/Train">Train</option> <option value="http://stackoverflow.com/questions/15812526/Tram">Tram</option> <option value="http://stackoverflow.com/questions/15812526/Taxi">Taxi</option> <option value="http://stackoverflow.com/questions/15812526/Other">Other</option> </select> <br /> <br /> <!--HIDDEN DIVS THAT WILL APPEAR UPON SELECTION OF THE VALUES IN THE SELECT ABOVE --> <div id="more_info_bus"> <label>Bus: Frequency of service</label> <input type="text" name="bus_freq" value="http://stackoverflow.com/questions/15812526/<?php echo $results['bus_freq']; ?>"/><br /> <label>Bus: route numbers(s)</label> <input type="text" name="bus_routes" value="http://stackoverflow.com/questions/15812526/<?php echo $results['bus_routes'];?>"/> <br /> <label>Bus: Distance from stop to venue (in meters)</label> <input type="text" name="bus_dist" value="http://stackoverflow.com/questions/15812526/<?php echo $results['bus_dist'];?>"/> <br /> <label>Bus: How accessible is the route from stop to venue?</label> <textarea cols="50" rows="2" name="bus_access"><?php echo $results['bus_access'];?></textarea> <br /> </div> <div id="more_info_train"> <label>Train: Frequency of service</label> <input type="text" name="train_freq" value="http://stackoverflow.com/questions/15812526/<?php echo $results['bus_freq']; ?>"/><br /> <label>Train: route numbers(s)</label> <input type="text" name="train_routes" value="http://stackoverflow.com/questions/15812526/<?php echo $results['bus_routes'];?>"/> <br /> <label>Train: Distance from stop to venue (in meters)</label> <input type="text" name="train_dist" value="http://stackoverflow.com/questions/15812526/<?php echo $results['bus_dist'];?>"/> <br /> <label>Train: How accessible is the route from stop to venue?</label> <textarea cols="50" rows="2" name="train_access"><?php echo $results['bus_access'];?></textarea> <br /> </div>\[/code\]Does anyone know why my \[code\]div\[/code\] sections stay hidden? They do not appear when the user selects each divs respective value.