www.webdeveloper.com
Results 1 to 5 of 5

Thread: Drop Down Menus with URL link options

Hybrid View

  1. #1
    Join Date
    Apr 2008
    Posts
    134

    Drop Down Menus with URL link options

    I want to create a drop down menu. The selections in the menu are links to other websites. When the visitor selects one of the options I want it to open a new window to that website.

    Here's what I've been practicing with:

    Code:
    <html>
    <head>
    <title>Drop Down Menu with URL links</title>
    </head>
    
    <html>
    <body>
    <form name="form1">
    <select name="menu1">
    <option value="http://www.espn.com">ESPN</option>
    <option value="http://www.cnn.com">CNN</option>
    <option value="http://www.abcnews.com">ABC</option>
    <option value="http://www.cbsnews.com">CBS</option>
    <option value="http://www.foxnews.com">FOX</option>
    </select>
    </body>
    </html>
    Normally, these are in <a href> </a> tags and target="_blank" is the command that opens the website in a separate window. How do I incorporate this into the <option> tags?

  2. #2
    Join Date
    Dec 2008
    Location
    New York
    Posts
    8
    sure this is pretty straightforward:

    HTML Code:
    <html>
    <head>
    </head>
    <body>
    <form name="form1">
    <select name="menu1" id="menu1">
    <option value="http://www.espn.com">ESPN</option>
    <option value="http://www.cnn.com">CNN</option>
    <option value="http://www.abcnews.com">ABC</option>
    <option value="http://www.cbsnews.com">CBS</option>
    <option value="http://www.foxnews.com">FOX</option>
    </select>
    <script type="text/javascript">
     var urlmenu = document.getElementById( 'menu1' );
     urlmenu.onchange = function() {
          window.open(  this.options[ this.selectedIndex ].value );
     };
    </script>
    </body>
    </html>

    Hope this is what you needed!

    Happy Coding!

  3. #3
    Join Date
    Dec 2008
    Location
    New York
    Posts
    8
    actually this is better:
    HTML Code:
    <html>
    <head>
    </head>
    <body>
    <select name="menu1" id="menu1">
    <option value="http://www.espn.com">ESPN</option>
    <option value="http://www.cnn.com">CNN</option>
    <option value="http://www.abcnews.com">ABC</option>
    <option value="http://www.cbsnews.com">CBS</option>
    <option value="http://www.foxnews.com">FOX</option>
    </select>
    <script type="text/javascript">
     var urlmenu = document.getElementById( 'menu1' );
     urlmenu.onchange = function() {
          window.open( this.options[ this.selectedIndex ].value );
     };
    </script>
    </body>
    </html>

  4. #4
    Join Date
    Jan 2008
    Posts
    22
    Thank you, this was exactly the information I needed today.

  5. #5
    Join Date
    May 2013
    Posts
    1
    Quick question -what if you want the new URL to show in the same tab, not open a new window?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles