tags:

views:

21

answers:

0

I have a script from the web which helps me to convert a html SELECT element into a styled drop-down. The script can be found here.. http://www.brainfault.com/demo/selectbox/0.5/

I am good so far and the script is working. I have a nice decorated dropdown menu and in Firebug is shows up in a unordered list structure just as expected.. There is one single problem though...

Although I start to know the ins-and-outs of jQuery, (I am quite new to jQuery), I can't get it managed to create a link inside the just created list to follow on a click.

I want the script to get the url from the OPTION-element's value (.val), (where he gets the name from as well)..

Part of the code responsible for the creation of te list is as the following:

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', parentid + '_' + $(this).val());
        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);
            setCurrent();
            hideMe();
        });
    });
    return ul;
}

I am trying for a couple of hours now with different ways of combining etc. of jQuery functions like innerhtml, html, append, prepend etc. to make it work but I keep on failing.

Please someone give me push into the right way..