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
12 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();
posted on October 19, 2010 at 11:08am by ralf:
@Chris: change it to:
var val = $(“select option:selected”).val()
that will work
posted on October 26, 2010 at 12:30pm by arie:
Cool! Gotta love jQuery. I was having some weird IE problems with MM_jumpMenu() and this solved the problem.
posted on November 09, 2010 at 2:40pm by Lee:
Hi guy’s any way to make this submit the form the select is in?
Thanks very much
Lee
posted on January 30, 2011 at 9:50am by STB:
May be somebody has a demo of this code?
posted on March 23, 2011 at 2:20pm by kućni ljubimci:
It looks so amazing. I must do it on some design websites.
Thank you for sharing.
posted on July 23, 2011 at 7:43pm by Jon Parker:
Thanks for putting this post up - Very helpful
Just designing our new website and I’ll be using this in combination with some responsive CSS for the mobile-friendly version.
posted on September 11, 2011 at 2:45pm by Chocolate:
Looks great, thanks for sharing
posted on January 19, 2012 at 2:30pm by Timothy:
Any working examples of this in action??? Esp with the sections enabled???
Leave a Comment