Question

我在320px视口（例如iPhone）中使用以下作为我的导航菜单

  <select>
     <option value="#">Home</option>
     <option value="#">About</option>
     <option value="#">Products and Services</option>
     <option value="#">Markets</option>
     <option value="#">Case Studies</option>
     <option value="#">Markets</option>
     <option value="#">Partners</option>
     <option value="#">Contact Us</option>
     <option value="#">Careers</option>
     <option value="#">News</option>
  </select>

我想将值设置为指向相应页面的链接。我如何设置它，我已将URL作为值，但它不起作用。我是否正确接近这个？

Answer 1

如果你使用jQuery，你可以这样做：

$('select').change(function(){
    var url = $(this).val();
    window.location = url;
});

向（每个）select元素添加change - 事件。当它改变时，运行功能。该函数从新选择的选项中获取值（在本例中为url），并将该url设置为窗口的新位置。

Answer 2

您可以将URL作为选项的值属性放入页面。在下面的示例中，我使用了常用网站的网址，但您可以使用网址中的网址。

<select id="nav">
     <option value="http://www.google.com">Google</option>
     <option value="http://www.ebay.com">eBay</option>
     <option value="http://www.amazon.com">Amazon</option>
</select>

如果您想要转到用户在更改下拉列表中的值时选择的URL，您可以使用JavaScript执行此操作。首先，获取选择元素by its ID。然后，add an event listener这是将执行when the value is changed的函数。在该函数中set the user's browser to go to that URL。

document.getElementById("nav").addEventListener('change', function () {
    window.location = this.value;
}, false);

您可以在此jsFiddle中看到我的示例。

Answer 3

对于由select模拟的小型显示<ul><li>导航菜单 - 请参阅twitter bootstrap或模拟其工作原理。

选项值作为选择下拉列表中的URL

3 个答案: