Turning a drop down list into links

andypandyrox456 · April 7th, 2010, 12:58 PM

Hello everyone!
Can someone please give me the code to turn a drop down list into a link? For example: There are 5 different items in the drop down list. Each time you click an item, it sends you to a different part of the same page.

dparsons · April 9th, 2010, 04:38 PM

If by "...turn a drop down list into a link..." you mean how to turn a select item into a clickable anchor tag I think you will find, if it can be done, it is not trivial and will require copious amounts of DHTML/JavaScript. As far as I know it is not possible.

However, there is a solution for your problem and it lies in the 'onchange' event of a select box and is pretty trivial. Consider the following:

html Code:

<select onchange="window.location=this.options[this.selectedIndex].value;">
     <option value="">Choose a destination...</option>
     <option value=http://www.reddit.com>Reddit</option>
     <option value=http://www.digg.com>Digg</option>
     <option value="http://www.thinkgeek.com/">ThinkGeek</option>
</select>

In cases like the above (where you are linking to external websites) you will probably want to use window.open('url', 'windowName') instead of window.location so that you aren't sending traffic AWAY from your website.

hth.
-Doug

andypandyrox456 · April 9th, 2010, 05:36 PM

Quote:

Originally Posted by dparsons

If by "...turn a drop down list into a link..." you mean how to turn a select item into a clickable anchor tag I think you will find, if it can be done, it is not trivial and will require copious amounts of DHTML/JavaScript. As far as I know it is not possible.

However, there is a solution for your problem and it lies in the 'onchange' event of a select box and is pretty trivial. Consider the following:

html Code:

<select onchange="window.location=this.options[this.selectedIndex].value;">

     <option value="">Choose a destination...</option>

     <option value=http://www.reddit.com>Reddit</option>

     <option value=http://www.digg.com>Digg</option>

     <option value="http://www.thinkgeek.com/">ThinkGeek</option>

</select>

In cases like the above (where you are linking to external websites) you will probably want to use window.open('url', 'windowName') instead of window.location so that you aren't sending traffic AWAY from your website.

hth.
-Doug

Can you explain the first line of code and what I would put in there? I don't understand it.
Also, I'm not sending people away from my website. I am creating links to different sections of the same page on my website.

dparsons · April 9th, 2010, 06:19 PM

Sure! This line

html Code:

<select onchange="window.location=this.options[this.selectedIndex].value;">

is your typical HTML combo box. The onchange attribute is a special type of attribute because it can execute javascript code when something happens. Something depends on which attribute you as there are quite a few of these types of attributes that are all prefixed with on (onMouseOver, onMouseOut, onFocus, onBlur, etc). In the case above we want something to happen when we change a value in our combo box so we select the onchange attribute. The code that follows between the " " is a small bit of JavaScript that I will break down for you:

window.location (sometimes wrote as window.location.href) refers to the current location (url) of the window this code resides in. So if you were to copy and paste my original bit of code from my first post into a new HTML file then open it in a web browser, window.location refers to that browser window location.

this.options[this.selectedIndex].value is where we determine what URL to send a user to. Let me start by saying that 'this' is a special keyword in JavaScript and I could fill many paragraphs explaining what it is and what it is used for. For now just know that in this context it refers to the combo box and will give you access to all of the combo boxes properties. options is a property of a combo box which contains all of the items within the combo box (in my case the items Digg, Reddit, ThinkGeek); an array to be exact. Now, since you want to redirect to the item that the user selected we need to figure our WHICH item they selected and can do so by using the selectedIndex property of the comboBox. This returns the numerical position of the item the user selected. Then finally we want the value (the URL I defined in my original code) of the selected item so we use the value property of the option. The value returns a url which causes the JavaScript to redirect to that url!

For your purposes you could probably change

html Code:

<option value=http://www.reddit.com>Reddit</option>

to something like

html Code:

<option value=mypage.html>My Page</option>

Does that make sense?

hth.
-Doug

andypandyrox456 · April 10th, 2010, 08:19 PM

Quote:

Originally Posted by dparsons

Sure! This line

html Code:

<select onchange="window.location=this.options[this.selectedIndex].value;">

is your typical HTML combo box. The onchange attribute is a special type of attribute because it can execute javascript code when something happens. Something depends on which attribute you as there are quite a few of these types of attributes that are all prefixed with on (onMouseOver, onMouseOut, onFocus, onBlur, etc). In the case above we want something to happen when we change a value in our combo box so we select the onchange attribute. The code that follows between the " " is a small bit of JavaScript that I will break down for you:

window.location (sometimes wrote as window.location.href) refers to the current location (url) of the window this code resides in. So if you were to copy and paste my original bit of code from my first post into a new HTML file then open it in a web browser, window.location refers to that browser window location.

this.options[this.selectedIndex].value is where we determine what URL to send a user to. Let me start by saying that 'this' is a special keyword in JavaScript and I could fill many paragraphs explaining what it is and what it is used for. For now just know that in this context it refers to the combo box and will give you access to all of the combo boxes properties. options is a property of a combo box which contains all of the items within the combo box (in my case the items Digg, Reddit, ThinkGeek); an array to be exact. Now, since you want to redirect to the item that the user selected we need to figure our WHICH item they selected and can do so by using the selectedIndex property of the comboBox. This returns the numerical position of the item the user selected. Then finally we want the value (the URL I defined in my original code) of the selected item so we use the value property of the option. The value returns a url which causes the JavaScript to redirect to that url!

For your purposes you could probably change

html Code:

<option value=http://www.reddit.com>Reddit</option>

to something like

html Code:

<option value=mypage.html>My Page</option>

Does that make sense?

hth.
-Doug

Yes thanks so much!

dparsons · April 10th, 2010, 08:27 PM

Welcome =]

chroniclemaster1 · April 11th, 2010, 12:14 PM

This looks like a successful way to resolve the initial problem posed, but I do have a question. I've always been told that this technique was inaccessible. Has that changed, or is it better to execute navigation as sidebar lists, create drop down menus, etc.?

dparsons · April 11th, 2010, 12:42 PM

I suppose it depends on what you mean by inaccessible so rather than guess at what you mean here are the pitfalls that I see with using navigation like this:

If for some ungodly reason a user would have javascript disabled in their browser the nav won't work (obviously).
AFAIK GoogleBot and other spiders will not crawl based upon this type of navigation since they can't execute JavaScript.
If your site needs to be Section 509 Compliant (US Federal law related to accessiblity of websites of Federal Web resources to people with disabilities) this type of nav is terrible since most Screen Reader applications will have no way of knowing that this is a type of navigation

All of these problems can be corrected by providing a Sitemap or some form of textual navigation somewhere on the site.

hth.
-Doug

chroniclemaster1 · April 14th, 2010, 01:49 PM

Interesting. That's basically what I was wondering about. Having worked primarily with styled navigation lists, are there any advantages that you see to hyperlinks in select elements that I'm missing out on?

dparsons · April 14th, 2010, 02:09 PM

None that I am aware of no. I have never personally used this style of navigation on a website except, maybe, for a Wizard style process. Other than that I prefer styled lists and sitemaps as the mode of navigation.

-Doug