Creating a Jumpmenu in jQuery
I ran across an article at A Beautiful Site today while trying to find a nice javascript jumpmenu code today to replace my bookmarked antiquated version. The javascript code I found there was very well done and geared toward unobtrusiveness, which is always a good thing. I grabbed the code and put it into my text editor:
<script type="text/javascript">
function initJumpMenus() {
// Turns all <select> elements with the 'jumpmenu' class into jump menus
var selectElements = document.getElementsByTagName("select");
for( i = 0; i < selectElements.length; i++ ) {
// Check for the class and make sure the element has an ID
if( selectElements[i].className == "jumpmenu" && document.getElementById (continued...)
(selectElements[i].id) != "" ) {
jumpmenu = document.getElementById(selectElements[i].id);
jumpmenu.onchange = function() {
if( this.options[this.selectedIndex].value != '' ) {
// Redirect
location.href=this.options[this.selectedIndex].value;
}
}
}
}
}
window.onload = function() {
initJumpMenus();
}
</script>
Just add class=“jumpmenu” to the select box and you are good to go.
However, as I read through the code, I noticed that most of what was happening was selecting and evaluating the value of the select box. I decided that I could easily rebuild this function in jQuery with a lot less code, and the resulting code would be more readable. As well, jQuery was already put to use on most pages of my site for other reasons, so creating the jumpmenu in jQuery made perfect sense.
Of course we need the requisite jQuery call, and to make this super easy, I will also include the great Selectboxes plugin from TexoTela. This plugin allows us to easily get a selectbox value, as well as some other functions that we won’t use here. Here is the simple code:
<script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/jquery.selectboxes.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
//on page load
$(document).ready(function() {
$(".jumpmenu").change(function() {
var val = $(this).selectedValues();
if (val != '') {
location.href=val;
}
});
});
-->
</script>
As with the original code, simply add class=“jumpmenu” to your selectbox and it should work for you. Good luck!
Subscribe to updates
4 Comments
posted on July 19, 2009 at 5:10am by Web design tutorials:
Nice code - thanks for sharing.
posted on October 28, 2009 at 12:32pm by Chris Dean:
Hi this is just what I need, but the Selectboxes plugin has moved from googlecode to git hub and now I can’t find it!
Any chance you could provide a link to it for download from your site here?
Thanks
posted on October 28, 2009 at 12:34pm by Chris Dean:
lol answered my own question it seems to be here, though I don’t know if this is the most recent version or not:
http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/selectboxes/?r=6185
posted on November 02, 2009 at 4:40pm by Chris:
For some reason this gives me an error
$(this).selectedValues is not a function
[Break on this error] var val = $(this).selectedValues();
Leave a Comment