Selecting Value from drop downs to go to URL

Question

I'm trying to setup a drop down menu, and have the final selection bring you to a URL. I can get the various drop downs working, but the browser doesnt do anything after you make your final selection.

I can get close, but then I lose the ability to hid the other drop downs that don't apply!

 <tr> <td> <p align="center"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="qmt-vehicle">Vehicle:</label> <select id="qmt-vehicle" name="vehicle"> <option></option> <option class="BMW" value="BMW">BMW</option> <option class="Audi" value="Audi">Audi</option> </select> <p align="center"> <label for="qmt-manufacturer">Manufacturer:</label> <select id="qmt-manufacturer" name="manufacturer"> <option></option> <option class="BMW" value="http://www.google.com">BMW</option> <option class="BMW" value="http://www.google.com">&nbsp;&nbsp;&nbsp;M3</option> <option class="BMW" value="http://www.google.com">&nbsp;&nbsp;&nbsp;M5</option> <option class="Audi" value="Audi">Audi</option> <option class="Audi" value="http://www.google.com">&nbsp;&nbsp;&nbsp;A4</option> <option class="Audi" value="http://www.google.com">&nbsp;&nbsp;&nbsp;S4</option> </select> <script> $(function() { $("#qmt-vehicle").on("change", function() { var levelClass = $('#qmt-vehicle').find('option:selected').attr('class'); console.log(levelClass); $('#qmt-manufacturer option').each(function() { var self = $(this); if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") { self.show(); } else { self.hide(); } }); }); }); </script> <p align="center"> </td> </tr> 

Answer 1

You just need to add this to your script :

 $("#qmt-manufacturer").on("change",function()
     {
        window.location.href = $('#qmt-vehicle').find('option:selected').attr("value");
    });

Answer 2

You can modify the select tag like this:

<select id="qmt-manufacturer" name="manufacturer" onchange="location = this.options[this.selectedIndex].value">

(as taken from this question -> using href links inside <option> tag )

Answer 3

I know this is not an answer cause @DinoMyte answered it already .. but to simplified your code a lil bit .. use

$('#qmt-manufacturer').val('').find('> option').hide();
$('#qmt-manufacturer > option[class="'+levelClass+'"]').show();

instead of

$('#qmt-manufacturer option').each(function () {
         var self = $(this);
        if (self.hasClass(levelClass)|| typeof(levelClass) == "undefined") {
             self.show();
         } else {
             self.hide(); 
         }
 });