Apply jump menu functionality on select box styled with jquery

Question

Hi all, I am using this script to apply style on a select box. It works fine as a standalone version.

But I also need to apply a jump menu functionality on this select box. I tried adding a function but it seems that there is some conflict between the two scripts. The jquery styling and the jump menu function can't work together at the same time.

Can you help me fix it? This is a sample code to let you know what I'm dealing with here:

<script type="text/javascript">
$(document).ready(function() {
 $('#jumpMenu').selectbox({debug: true});

 function MM_jumpMenu(targ,selObj,restore){ //v3.0
   eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
   if (restore) selObj.selectedIndex=0;
 }
});
</script>

<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
       <option value="http://www.link1.com"&gt;link1&lt;/option&gt;
       <option value="http://www.link2.com"&gt;link2&lt;/option&gt;
       <option value="http://www.link3.com"&gt;link3&lt;/option&gt;
</select>

Answer 1

The problem is rather obvious. selectbox plugin creates a div that is presented instead of the select so that it can be styled. Get a firebug addon and see for Yourself.

Therefore no onchange is being fired. You have to get to the guts of the plugin and find a place to put a callback function that would trigger Your onchange actions.

See if the plugin provides an option for passing callbacks.

Answer 2

I finally found a solution to this. I made some changes inside the .js code file

function getSelectOptions(parentid) {
        var select_options = new Array();
        var ul = document.createElement('ul');
        $select.children('option').each(function() {
            var li = document.createElement('li');
            li.setAttribute('id', $(this).val());/*applied the url as the id of the li item*/
            li.innerHTML = $(this).html();
            if ($(this).is(':selected')) {
                $input.val($(this).html());
                $(li).addClass(opt.currentClass);
            }
            ul.appendChild(li);
            $(li)
            .mouseover(function(event) {
                hasfocus = 1;
                if (opt.debug) console.log('over on : '+this.id);
                jQuery(event.target, $container).addClass(opt.hoverClass);
            })
            .mouseout(function(event) {
                hasfocus = -1;
                if (opt.debug) console.log('out on : '+this.id);
                jQuery(event.target, $container).removeClass(opt.hoverClass);
            })
            .click(function(event) {
              var fl = $('li.'+opt.hoverClass, $container).get(0);
                if (opt.debug) console.log('click on :'+this.id);
                $('li.'+opt.currentClass).removeClass(opt.currentClass); 
                $(this).addClass(opt.currentClass);
                document.location = this.id;/*redirect to the li item's id value on click event*/
                setCurrent();
                hideMe();
            });
        });
        return ul;
    }

Answer 3

What about:

$("#jumpMenu").change(function(e) {
    window.location.href = this.options[this.selectedIndex].value;
});

or even

$("#jumpMenu").change(function(e) {
   url = this.options[this.selectedIndex].value;
   $("#output").load(url);
});

Answer 4

Note that jQuery handles the correct index value in this example. An even tighter script would read.

<script src="assets/jquery_1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function (){  
        $("#jumpMenu").change(function(e) {
            window.location.href = $(this).val();
        });
    });
</script>

The HTML

<select name="jumpMenu" id="jumpMenu">
    <option>Choose A Page</option>
    <option value="page1.html">Page One Title</option>
    <option value="page2.html">Page Two Title</option>
</select>