使用 <select> 创建下拉菜单导航答案

【问题标题】：Creating drop menu navigation with <select>使用 <select> 创建下拉菜单导航
【发布时间】：2012-06-11 21:25:47
【问题描述】：

我已经设法让自己使用 html <select> 进行下拉菜单导航。不过，我遇到了一个问题。

我的外部链接不起作用。即Youtube。

代码如下：

   <select ONCHANGE="location = this.options[this.selectedIndex].value;">

   <option value="" selected="selected">Navigation</option>

   <option value="index.html">Home</option>
   <option value="detroitvideoproduction.html">Video Production</option>
   <option value="locationsounddetroit.html">Location Sound</option>
   <option value="videoeditingdetroit.html">Video Editing</option>
   <option value="custommotiongraphicsdetroit.html">Custom Graphics</option>
   <option value="demoreel.html">Demo Reel</option>
   <option value="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</option>
   <option value="http://vimeo.com/liveoutloudproductions">Vimeo</option>
   <option value="dslrrentalsdetroit.html">Camera Rental</option>
    <option value="lectrosonicsrentalsdetroit.html">Audio Rental</option>
    <option value="griprentalsdetroit.html">Grip Rental</option>
    <option value="camerasupportdetroit.html">Camera Support</option>
    <option value="about.html">About Us</option>
    <option value="contact.html">Contact</option>
                 </select>

如您所见，我有 2 个外部链接。一个给 Vimeo，另一个给 Youtube。当您选择 Vimeo 时，它工作得非常好，并带您到适当的 vimeo 页面，但是当你选择 Youtube 时，它什么都不做。

我知道链接中的 URL 是正确的，我在发布之前检查了它。

有人知道为什么 Youtube 不能工作，而 Vimeo 可以吗？

【问题讨论】：

您在哪个浏览器中测试？
我们很久以前就放弃了，用 Wordpress 重建了网站。
不管怎样，刚刚在 Safari 9 中测试了这个解决方案，它仍然可以正常工作。

标签： html drop-down-menu navigation html-select

【解决方案1】：

好吧，你不会想听到这个，但它对我来说很好用......我复制并粘贴了代码并用 Chrome 对其进行了测试，它可以很好地进入你的页面。

【讨论】：

【解决方案2】：

您可能希望将onChange 更改为window.location.href=this.value

所以，正确的代码是：

<select onChange="window.location.href=this.value">
    <option value="" selected="selected">Navigation</option>
    <option value="index.html">Home</option>
    <option value="detroitvideoproduction.html">Video Production</option>
    <option value="locationsounddetroit.html">Location Sound</option>
    <option value="videoeditingdetroit.html">Video Editing</option>
    <option value="custommotiongraphicsdetroit.html">Custom Graphics</option>
    <option value="demoreel.html">Demo Reel</option>
    <option value="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</option>
    <option value="http://vimeo.com/liveoutloudproductions">Vimeo</option>
    <option value="dslrrentalsdetroit.html">Camera Rental</option>
    <option value="lectrosonicsrentalsdetroit.html">Audio Rental</option>
    <option value="griprentalsdetroit.html">Grip Rental</option>
    <option value="camerasupportdetroit.html">Camera Support</option>
    <option value="about.html">About Us</option>
    <option value="contact.html">Contact</option>
</select>

【讨论】：

【解决方案3】：

某些浏览器可能会反对查看 ?在选择列表中的字符串中。尝试使用 TinyURL 转换您的 YouTube URL。我还没有测试过，但我猜这可以解决问题。

【讨论】：