www.webdeveloper.com
Results 1 to 8 of 8

Thread: Hyperlink from Select Option

Hybrid View

  1. #1
    Join Date
    Apr 2011
    Posts
    2

    Hyperlink from Select Option

    Please provide the HTML code to allow this function:
    When the user selects an option from a drop-down list, I want it to redirect (hyperlink) them to a different web page.

    Please pardon my ignorance, as I am still in my infancy with all of this.

    I am trying to embed an anchor in the <option> tags, but it seems to ignore the <a>...</a> tags.

    Thanks in advance for any help you can offer!

  2. #2
    Join Date
    Apr 2011
    Location
    I live in the pinaple under the sea
    Posts
    107
    You cannot do it in html, you should use javascript

  3. #3
    Join Date
    Mar 2011
    Location
    Rome, Italy
    Posts
    101

    solution for you

    Below you'll find the code you're looking for... as you can see, it requires Javascript:

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    function changelink(){
    if(document.getElementById("opt1").selected==true){window.open('http://www.google.it/','_self')};
    if(document.getElementById("opt2").selected==true){window.open('http://www.google.com/','_self')};
    if(document.getElementById("opt3").selected==true){window.open('http://www.webdeveloper.com/','_self')};
    }
    </script>
    
    </head>
    
    <body>
    
    <select onchange="changelink()">
      <option id="opt0">-</option>  
      <option id="opt1">Link#1</option>
      <option id="opt2">Link#2</option>
      <option id="opt3">Link#3</option>
    </select>
     
    </body>
    </html>
    You can change _self in _blank if you want the link to open a new window.
    Last edited by MrSnowDrop; 04-07-2011 at 07:48 AM.

  4. #4
    Join Date
    Apr 2011
    Posts
    2
    Thank you so much for making this clear! JavaScript is the next book I'm about to tear into, followed by PHP. I've got a long way to go, but I guess it all has to start somewhere.

    Thanks again.

  5. #5
    Join Date
    Mar 2014
    Posts
    2
    Thank you MrSnowDrop, it helped me a lot indeed.

    But I do want to know how to do the same making use of a "Go" button.
    Like, -
    opt1 Go
    opt2
    You choose either of the options and hit "Go" and it redirects to a different page for each option.
    Is that possible?If yes, how?
    Please reply.........

  6. #6
    Join Date
    Oct 2013
    Posts
    600
    Quote Originally Posted by anchith View Post
    I do want to know how to do the same making use of a "Go" button.
    Modifying MrSnowDrop's code:
    HTML Code:
    <html>
    <head>
    
    <script type="text/javascript">
    function changelink(){
    if(document.getElementById("opt1").selected==true){window.open('http://www.google.it/','_self')};
    if(document.getElementById("opt2").selected==true){window.open('http://www.google.com/','_self')};
    if(document.getElementById("opt3").selected==true){window.open('http://www.webdeveloper.com/','_self')};
    }
    </script>
    
    </head>
    
    <body>
    
    <select>
      <option id="opt0">-</option>  
      <option id="opt1">Link#1</option>
      <option id="opt2">Link#2</option>
      <option id="opt3">Link#3</option>
    </select> &nbsp;
    <input type="button" value="Go" onclick="changelink()" />
    
     
    </body>
    </html>

  7. #7
    Join Date
    Mar 2014
    Posts
    2

    Thumbs up

    Thank you very much Kevin2, it helped me a lot

  8. #8
    Join Date
    Mar 2014
    Posts
    40
    Thank you Kevin2

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