Making Reactive Drop Down Link Menus

[dvduval]

What is the secret to making form drop down lists that immediately take you to the link you choose when you release the mouse button (without having to click "submit")?

Also, can it be done in a search engine friendly way?

[ShawnR]

Done in javascript (e.g. using the onchange event), hence not search engine friendly. To make it search engine friendly, you could include a <noscript> tag containing all the <a ...> links corresponding to each of the options in the drop-down.

Shawn

[Hobgoblin]

Here is the non-SE friendly version:

<form>
 <SELECT name="SELECT" onchange="window.location=this.options[this.selectedIndex].value;">
 <OPTION value="">Site Menu....
 <OPTION value="">-----------------------
 <OPTION value="home.html">Home Page
 <OPTION value="photo.html">Photo Galleries
 <OPTION value="links.html">Links
 </SELECT>
</form>

I would suggest you put simple text links elsewhere on the page, like at the bottom - not only for SEO, but for the few users who keep Javascript disbaled.

[ncsuk]

Doesnt Google not like <noscript> tags however because I noticed a few months ago that google dropped a load of listing because of the <noscript> tag..!

[dvduval]

That works great. I have a shopping cart where the customer has to select 4 options and it makes it much easier for the customer now. Thanks for your help.

For other uses it would be cool to have a search engine friendly version, so if anyone knows, I hope you'll give me a hint.

[dvduval]

Is there a way to pass variables using the above javascript example?

If not, that messes up my plan.

[garann]

You should be able to pass variables from a form, if the drop-down is inside of it, by changing the code to something like:

.. onchange="document.forms[0].action=this.value;document.forms[0].submit();"

Or if it's just one or two variables, you can put them in the querystring:
[Serverside variable]

.. onchange="location.href=this.value+'?inputVar=<%= serverVar %>';"

[Javascript or DOM variable]

.. onchange="location.href=this.value+'?inputVar='+document.getElementById('myVarToPass');"

If that's even close to what you need, hope it helps a little..
g.