Posted in: Examples, jQuery
This morning I had to come up with a method to dynamically load an external file into a div based on a <select>. While this in itself is pretty straight forward I needed a solution that was quick, light and flexible. Since IE 6/7 were not handling the .click handler on the <option> elements I had to come up with another solution. The script is very small and is dynamic as you can add/remove <option> tags to the list at whim and it will handle the rest for you.
jQuery Code:
$(document).ready(function(){
$('#contactFormSelect :selected').val();
$("#contactFormSelect").change(function(){
$('#formLoader').load($('#contactFormSelect').val());
});
});
The HTML:
<select id="contactFormSelect"> <option selected="selected">... selection</option> <option value="/support/qcform.php">Questions / Comments</option> <option value="/support/tsform.php">Technical Support</option> <option value="/support/copyrightform.php">Copyright</option> <option value="/support/icform.php">Inappropriate Content</option> <option value="/support/mrform.php">Media Relations</option> <option value="/support/advertisingform.php">Advertising</option> </select>
To sum it all up what is being done here is jQuery is scrubbing the value="" portion of the option tags, thus when one of the options is selected the contents (in this case the url) to the external page is passed and then loaded into the div #formLoader so the page is updated but never really changed. Easy for users and easy on the server. In this scenario javascript disabled is not a concern so there are no fall backs in place.
Pownce this article! Digg This