CODEWITHSUNDEEP
javascriptselect
Kelsey
Kelsey

Reputation: 21

Customized HTML select with links for options

I've been using this jsfiddle that I've modified from the original to fit my style. The problem is that I need to make each option a link, so when you click on one it loads the url set as the value. I found the following function in another forum, which works with a normal HTML select, however when I use the jsfiddle version it doesn't work anymore:

document.getElementById("test_select").onchange = function() {
        if (this.selectedIndex!==0) {
            window.location.href = this.value;
        }        
    };

I don't know anything about Javascript or jQuery, I work with just HTML and CSS, so if someone could point out what is conflicting in my jfiddle so that I can get this working I would really appreciate it!

Upvotes: 1

Views: 66

Answers (2)

Jonathan
Jonathan

Reputation: 6537

Just add it into your existing function:

if ($tgt.is('li')) {
    $(this).find('span').html($tgt.html());
    var value=$tgt.attr('rel');
    $('#test_select').val( value);
    // Add this line:
    window.location.href = value;
}

Edit: JSFiddle doesn't seem to be working this evening, so here it is on Codepen instead: http://codepen.io/anon/pen/pJqYYO

Upvotes: 2

Jordan Davis
Jordan Davis

Reputation: 1520

This should do the trick, you can edit the values of the options and where you want to redirect the user, in the example code below I choose - google, facebook, stackoverflow.

//CODE

<!DOCTYPE html>
<html>
<head>
<script>
var valChange = function(val) { 
    switch(val){
        case "one":
            window.location = "http://google.com"
            break;
        case "two":
            window.location = "http://facebook.com"
            break;
        case "three":
            window.location = "http://stackoverflow.com"
            break;  
    }
};
</script>
</head>
<body>
    <select onchange="valChange(this.value)">
        <option selected disabled>Choose</option>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
    </select>
</body>
</html>

Upvotes: 0

Related Questions