Please help with creating Dealer-locator drop-down menu

[macaddict23]

Here's what I'm trying to create.

1) I want a drop-down menu listing six dealers.

2) Each will take you to an external website.

3) I want to be able to select a dealer from the drop-down, click "GO" and then be taken to that dealer's web site.

4) When I click the Back button on my browser, I want the default of option of this drop-down to revert back to "Find a Sampler dealer . . ."

I hope this made sense. Thank you.

<form id="form2" name="form2" method="post" action="">
  <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
   <option value="" disabled="disabled" select="selected">Find a Sample Dealer...</option>
    <option value="http://www.somewebsite1.com">- Dealer 1</option>
    <option value="http://www.somewebsite2.com">- Dealer 2</option>
    <option value="http://www.somewebsite3.com">- Dealer 3</option>
    <option value="http://www.somewebsite4.com">- Dealer 4</option>
    <option value="http://www.somewebsite5.com">- Dealer 5</option>
    <option value="http://www.somewebsite6.com">- Dealer 6</option>
  </select>
<input type="submit" value="GO">
</form>

 

[angelwatt]

Just so you know, doing this creates accessibility issues as it requires JavaScript to be done, which I consider bad. So I'm also adding a noscript component, which would take care of this issue. This is just one way to accomplish this.

<form id="form2" action=""
  onsubmit="location.href=document.getElementById('dealer').value">
<label for="dealer">Pick a Dealer</label>
<script type="text/javascript">
document.write("<select id='dealer'>\n"+
"  <option value='htp:/www.sample1.com/'>Dealer 1</option>\n"+
"  <option value='htp:/www.sample2.com/'>Dealer 2</option>\n"+
"</select>\n"+
"<input type='submit' value='Go' />\n");
</script>
<noscript>
<ul>
  <li><a href="htp:/www.sample1.com/">Dealer 1</a></li>
  <li><a href="htp:/www.sample2.com/">Dealer 2</a></li>
</ul>
</noscript>
</form>

* URLs written broken on purpose.

 

[SrWebDeveloper]

Compliments to angelwatt for conveying the importance of accessibility compatibility issues, i.e. usage of the noscript tag. I found a nice link for a more customizable solution that also does a decent job addressing that issue plus many others (DOM support, JS and browser independence, CSS styling):

Information about the script: http://onlinetools.org/tools/yadm/index.html

Download the script: http://onlinetools.org/tools/yadm/yadm.js

Just to offer an additional suggestion - I'm sure others have frameworks they use alot, the one I'm suggesting is free, well documented, does a decent job addressing issues most frameworks do not, and is easily customizable. No single recommendation is perfect, of course. This one is slightly older, but with DOM support it's still practical today.

-jim