CODEWITHSUNDEEP
javascripthtmlcss
Dan Sharp
Dan Sharp

Reputation: 1

Dropdown Button is not working, what is missing?

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>

Upvotes: 0

Views: 46

Answers (1)

Hypermystic
Hypermystic

Reputation: 1020

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/

Upvotes: 1

Related Questions