选择菜单，使用 JQuery 转到选择的 url？答案

【问题标题】：Select Menu, go to url on select with JQuery?选择菜单，使用 JQuery 转到选择的 url？
【发布时间】：2011-02-10 10:46:19
【问题描述】：

我有以下html：

HTML 标记

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

还有一些JS代码：

JQuery/JavaScript 代码

$('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());
   });
});

这段代码生成了一个选择下拉菜单，正是我想要的，但我的问题是如何转到选择的 url？所以如果我点击 yahoo，它会将我带到 yahoo.com？

感谢您的帮助！

【问题讨论】：

为什么要这样混合原生 js 和 jQuery？使用 $('') 创建一个新的 DOM 元素。
auto-<select>“跳转菜单”是一个名誉扫地的导航工具；它有严重的可用性和可访问性问题。请不要使用这个。让<ul> 本身成为一个弹出元素怎么样？

标签： javascript jquery select onselect

【解决方案1】：

$('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;
  })
});

在主要浏览器上测试了demo。

【讨论】：

这很完美！但是有一个问题，如果我链接到我自己的网站，有没有办法让 jquery 识别我刚刚链接到的页面并将该页面设置为选择菜单中的默认选项？
@Sean，你能进一步解释一下吗？
@Reigel 当然，看看这个例子：pastebin.com/VUczwRpF 如果每个页面都有 jquery url 选择有什么办法可以做到，所以如果我点击“猫”页面让猫显示当它把我带到猫页面时，作为 jquery 选择菜单中的默认选项？我希望这是有道理的。

【解决方案2】：

应该这样做：

 $('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())});
       });
    });

【讨论】：

谢谢！它在 frefox 中再次出现问题，但在 ie 6/7 中没有？

【解决方案3】：

在创建选择时添加更改事件，并将用户发送到所选值。

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

【讨论】：

【解决方案4】：

试试这个：

$('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());
   });
});

现在进行重定向....

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

使用 live() 方法是因为您的选择框是在 DOM 中动态创建的。

【讨论】：

谢谢，在 Firefox 和 Opera 中完美运行，但不是 6,7 或 chrome？

【解决方案5】：

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

【讨论】：

简单有用，但仅用于选择>选项:)