Anchors within dropdown menu using text editor

  • spipkin

    (@spipkin)


    9 years, 1 month ago

    Hi There,
    I am struggling to find an answer on how to link my dropdown menu options to anchors in the body text.
    I am trying to create a dealer list by state so that when the user clicks, for example, Maine, in the dropdown menu, it takes them to my anchor link of Maine. I have the anchors created and I have my dropdown created with all 50 states.
    This is what the dropdown looks like:
    <select>
    <option>Alabama</option>
    <option>Alaska</option>
    <option>Arizona</option>
    <option>Arkansas</option>
    <option>California</option>

    etc…
    When I select the text i want to link to the anchor and put in the link #maine, it does not jump to it when i update and view page. should i only highlight a certain part of the <option>state</option> ?

    I am a total beginner when it comes to coding and if there’s a plugin that would do this easily, i would be open to suggestions there as well. I know the solution has to be pretty easy.

    Thanks in advance!
    Stephanie

    • This topic was modified 9 years, 1 month ago by spipkin.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 1 month ago

    A select element is the wrong element to use. A select element is meant to be used in a form, its purpose is to allow people to choose options. It does not do anything else.

    You need to use an anchor element. The purpose of an anchor element is to lead to content either on the same page or another page. It is meant for this interaction.

    Thread Starter spipkin

    (@spipkin)

    9 years, 1 month ago

    Hi Andrew,
    The select element is the dropdown menu of states for someone to choose from. We want it to be that when someone selects a state from the menu, it jumps down to that state on the page using an anchor.
    For example, here is our current website dealer list that I am trying to recreate in our new website.
    http://www.ussolarmounts.us/installer.html
    I have all of the anchors set in the text editor, but any time I try to link to the anchors within the dropdown menu, it doesn’t do anything.

    Is there a way to make the dropdown menu with anchor links so it behaves like the current dealer page we have?

    Thanks!
    Stephanie

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 1 month ago

    What you’ve got on your current website is custom behaviour that is entirely different to what normally happens when you select an option from the dropdown.

    This is the script you’ve implemented on the current site:

    
function goto(val){
var url="#"+val;
window.location.href=url;
}

    And this is the HTML of the select element:

    
<select class="countryname" onchange="goto(this.value)">

    The important bit being the “onchange” bit.

    Thread Starter spipkin

    (@spipkin)

    9 years, 1 month ago

    Hi Andrew,
    Would you be able to show me how you would create a menu within the page with anchor links inserted? Would you not use the select element?

    We think that we are just writing something wrong in the text editor. So in the select element below, what would i need to change to make it jump down to the created anchor for each state? I am uncertain how to alter this element to include the onchange=”goto(this.value)”> html you mentioned. Would i add this to each <option>state</option> somewhere? Again, total beginner to back end editing.

    <select>
    <option>Alabama</option>
    <option>Alaska</option>
    <option>Arizona</option>
    <option>Arkansas</option>
    <option>California</option>

    Thank you for your help.
    Stephanie

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Anchors within dropdown menu using text editor’ is closed to new replies.