Dropdown Button is not working, what is missing?

Question

I recently created the Dropdown which lists a number of states, and every option points to a different page. The button is not functional, it selects the elements, and won't redirect me to a the page I selected.

Every time I click the button, nothing happens.

How can I make this work?


<head>
<style>
.state-drop
{
    height: auto;
    display: inline-block;
    width: auto;
    padding:1px 35px;
    background-image:linear-gradient(to right, #044A04, #00B300) ;
    border-radius: 50px;
}
.state-drop select
{
    background-color: transparent;
    color:#fff;
    border:none;
    outline: none;
    font-size: 20px;
    min-height: 48px;
    padding:0px 25px 0px 0px;
}

.state-drop select option:disabled
{
    background-color:#ddd;
    color:#999;
}
.state-drop select option{
    color:#525252;
}




</style>

</head>



<body>

<div class="state-drop">
<select name="states" class="state-select">

        <option selected="">Select Your State</option>                             
        <option value="https://mymmjdoctor.com/medical-marijuana-card-arkansas/">Arkansas</option>
        <option value="https://mymmjdoctor.com/medical-marijuana-card-california/">California</option>
        <option value="https://mymmjdoctor.com/medical-marijuana-card-florida/">Florida</option>
        <option value="https://mymmjdoctor.com/medical-marijuana-card-georgia/">Georgia</option>
        <option value="https://mymmjdoctor.com/medical-marijuana-card-hawaii/">Hawaii</option>
        <option value="https://mymmjdoctor.com/medical-marijuana-card-illinois/">Illinois</option>
        <option value="https://mymmjdoctor.com/medical-marijuana-card-maryland/">Maryland</option> 
        <option value="https://mymmjdoctor.com/medical-marijuana-card-minnesota/">Minnesota</option>
        <option value="https://mymmjdoctor.com/medical-marijuana-card-missouri/">Missouri</option> 
        <option value="https://mymmjdoctor.com/medical-marijuana-card-michigan/">Michigan</option>  
        <option value="https://mymmjdoctor.com/medical-marijuana-card-nevada/">Nevada</option>  
        <option value="https://mymmjdoctor.com/medical-marijuana-card-new-jersey/">New Jersey</option>
        <option value="https://mymmjdoctor.com/medical-marijuana-card-new-york/">New York</option>  
        <option value="https://mymmjdoctor.com/medical-marijuana-card-ohio/">Ohio</option>  
        <option value="https://mymmjdoctor.com/medical-marijuana-card-oklahoma/">Oklahoma</option>  
        <option value="https://mymmjdoctor.com/medical-marijuana-card-puerto-rico/">Puerto Rico</option> 
        <option value="https://mymmjdoctor.com/medical-marijuana-card-pennsylvania/">Pennsylvania</option> 
        <option value="https://mymmjdoctor.com/medical-marijuana-card-virginia/">Virginia</option>
        <option value="https://mymmjdoctor.com/medical-marijuana-card-washington-dc/">Washington DC</option>  
        
        </select>
        
       </body>

Welcome to Stackoverflow, Dan! Is this the entirety of the code you are working with? You mention a button, but I am not seeing any button in this HTML? — Cow, Mar 16 '22 at 02:18
[link](https://prnt.sc/hCb_rV0lVOaA) This is what I mean by the button — Dan Sharp, Mar 16 '22 at 02:21
With just pure HTML, a select menu will not be able to redirect a user. The select element is one of many input elements you can use to collect information from a user, but you will need to leverage JavaScript to make changes to the user's browser/navigation based on their selection. [Here you can see how someone hooks up the select menu to grab the value on change.](https://stackoverflow.com/a/59968055/1623251) [Here you can see how to redirect a user with that retrieved value.](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — Cow, Mar 16 '22 at 02:34
No, But I am redirecting visitor to different pages on my website. — Dan Sharp, Mar 16 '22 at 17:14

score 1 · Answer 1 · answered Mar 16 '22 at 02:42

It seems that you are trying to go to next page just on selecting the value from the dropdown.

To get the above scenario working you can use the onchange event to redirect to the new url.

just add

<select name="states" class="state-select" onchange="location = this.value;">

Demo: https://jsfiddle.net/a26jkhns/3/

Dropdown Button is not working, what is missing?

1 Answers1