Как сделать выпадающее меню со ссылкой

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

вы можете попробовать добавить id на свой выбор и добавить событие onchange с jquery.

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

Answer 3

Я нашел самый простой способ создания меню перехода, чтобы скопировать и вставить код, а затем внести необходимые изменения. 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> 

Edit:

Для этого примера, вам не нужно будет отправке/идти кнопка.