Please help with creating Dealer-locator drop-down menu

Discussion in 'Web Design and Development' started by macaddict23, Jun 25, 2008.

  1. macaddict23 macrumors 6502


    Jun 20, 2006
    MacVille, USA
    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="">- Dealer 1</option>
        <option value="">- Dealer 2</option>
        <option value="">- Dealer 3</option>
        <option value="">- Dealer 4</option>
        <option value="">- Dealer 5</option>
        <option value="">- Dealer 6</option>
    <input type="submit" value="GO">
  2. angelwatt Moderator emeritus


    Aug 16, 2005
    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=""
    <label for="dealer">Pick a Dealer</label>
    <script type="text/javascript">
    document.write("<select id='dealer'>\n"+
    "  <option value='htp:/'>Dealer 1</option>\n"+
    "  <option value='htp:/'>Dealer 2</option>\n"+
    "<input type='submit' value='Go' />\n");
      <li><a href="htp:/">Dealer 1</a></li>
      <li><a href="htp:/">Dealer 2</a></li>
    * URLs written broken on purpose.
  3. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    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:

    Download the script:

    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.


Share This Page