Question

我在我的网站上创建了一个带链接的下拉列表，但是当我选择该项目并单击go时，它不会重定向到任何地方。你可以分享下面代码中的错误吗？

    <script>
      function goToNewPage(dropdownlist){
       var url = dropdownlist.options(dropdownlist.selectedIndex).value;
       if (url != ""){
       window.open(url);
       }}
    </script>
    <form name="dropdown">
       <label>I am Looking for</label><img src="http://test.techkalph.com/wp-content/uploads/2015/10/Bee-searching1.png">
       <select name="list" accesskey="E">
       <option selected>Please select one</option>
       <option value="http://www.google.com/" style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/flowers271.png); background-repeat:no-repeat;">Japanese Companies</option>
       <option value="http://www.google.com/" style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/social16.png); background-repeat:no-repeat;">Service Provider (Non-Japanese)</option>
       <select>
       <input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
    </form>

期待您的回复。

谢谢。

Answer 1

替换它：

var url = dropdownlist.options(dropdownlist.selectedIndex).value;

由此：

var url = dropdownlist.options[dropdownlist.selectedIndex].value;

注意方括号。 dropdownlist.options返回一个数组，并选择一个索引，我们在Javascript中使用方括号。

错误在于您使用了圆括号而不是方括号。

Here is the JSFiddle demo

Answer 2

我发现创建跳转菜单最简单的方法是复制并粘贴代码，然后进行必要的更改。 Jump Menus

Javascript代码：

<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>

HTML代码：

    <select name="select" onChange="MM_jumpMenu('parent',this,1)">
      <option value="http://www.google.com" selected>Google</option>
      <option value="http://www.bing.com">Bing</option>
      <option value="http://www.yahoo.com">Yahoo</option>
      <option value="http://www.facebook.com">Facebook</option>
    </select>

修改：

对于此示例，您不需要提交/转到按钮。

Answer 3

您可以尝试在select上添加id，并使用jquery在onchange上添加一个事件。

 <select id="gotourl">
    <option selected>Please select one</option>
                               <option value="http://www.google.com/" style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/flowers271.png); background-repeat:no-repeat;">Japanese Companies</option>
                               <option value="http://www.google.com/" style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/social16.png); background-repeat:no-repeat;">Service Provider (Non-Japanese)</option>
                               <select>

JQuery：

$("#gotourl").change(function(){
if($(this).val()!="" && $(this).val()!=null)
{
   window.location.href=$(this).val();
}
});

如何使用链接下拉列表

3 个答案: