如何使用链接进行下拉

Question

I have made a dropdown with link in my site but when I select the item and click go, it is not redirecting anywhere. Can you please share what is the error in my below code?

    <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>

Looking forward for your reply.

Thank you.

Answer 1

Replace this:

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

by this:

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

Notice the square brackets. dropdownlist.options returns an array, and to select an index we use square brackets in Javascript.

The mistake was that you used round-brackets instead of square brackets .

Here is the JSFiddle demo

Answer 2

I've found the easiest way to create a jump menu is to copy and paste the code and then make the changes necessary. Jump Menus

Javascript Code:

<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 Code:

    <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:

For this example, you wouldn't need a submit/go button.

Answer 3

you can try to add an id on your select and add an event onchange with 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();
}
});