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

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #1
    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.

    Code:
    <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>
    
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.

    HTML:
    <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.
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    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
     

Share This Page