I have the following html:

HTML markup

<ul id="test">
   <li><a href="">yahoo</a></li>
   <li><a href="">Google</a></li>
</ul>

And some JS code:

JQuery/JavaScript Code

$('ul#test').each(function()
{
   var select=$(document.createElement('select')).insertBefore($(this).hide());
   $('>li a', this).each(function()
   { 
 option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html());
   });
});

This code produces a select dropdown menu, exactly what I want, but my question is how do I go to the url on select? So if I click yahoo, it brings me to yahoo?

Thanks for your help!

I have the following html:

HTML markup

<ul id="test">
   <li><a href="http://www.yahoo.">yahoo</a></li>
   <li><a href="http://www.google.">Google</a></li>
</ul>

And some JS code:

JQuery/JavaScript Code

$('ul#test').each(function()
{
   var select=$(document.createElement('select')).insertBefore($(this).hide());
   $('>li a', this).each(function()
   { 
 option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html());
   });
});

This code produces a select dropdown menu, exactly what I want, but my question is how do I go to the url on select? So if I click yahoo, it brings me to yahoo.?

Thanks for your help!

• javascript
• jquery
• select
• onselect

Share Improve this question Follow asked Apr 21, 2010 at 5:10 KeithKeith 26.5k3636 gold badges9898 silver badges129129 bronze badges 2

• why mixing native js and jQuery that way? use $('<select/>') to create a new DOM element. – jAndy Commented Apr 21, 2010 at 6:45
• 2 The auto-<select> “jump menu” is a discredited navigational tool; it has serious usability and accessibility problems. Please don't use this. How about just making the <ul> itself a pop-up element instead? – bobince Commented Apr 21, 2010 at 7:08

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

$('ul#test').each(function()
{
   var select=$(document.createElement('select')).insertBefore($(this).hide());
   $('>li a', this).each(function()
   { 
 option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html());
   });
   select.change(function(){
    //alert('url = ' + this.value );
    window.location.href = this.value;
  })
});

tested working demo on major browsers.

This should do it:

 $('ul#test').each(function()
    {
       var select=$(document.createElement('select')).insertBefore($(this).hide());
       $('>li a', this).each(function()
       { 
     option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html());
     option.click(function(){window.location = $(this).val())});
       });
    });

add a change event to the creation of the select, and send user to the selected value.

var select=$(document.createElement('select')).insertBefore($(this).hide()).change(function(){
  document.location.href = $(this).val();
}); 

Give this a try:

$('ul#test').each(function()
{
   // also give the select an id
   var select = $(document.createElement('select')).attr('id', 'myselect').insertBefore($(this).hide());

   $('>li a', this).each(function()
   { 
     option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html());
   });
});

Now for redirecting....

$(function(){
  $('#myselect').live('change', function(){
    document.location.href = $(this).val();
  });
});

The live() method used because your select box is created dynamically in the DOM.

<select name="dest" class="selec" onchange='document.location.href=this.options[this.selectedIndex].value;'>