местоположение смены jQuery на основе двух выпадающих меню

Question

У меня есть два выпадающих меню и кнопка, и на основе выбора он идет по определенному URL-адресу здесь, из моего первого варианта работы Canada и america, но для южного региона опция не работает.

Для примера. она отлично работает для http://demo5454site.com/tour-categories/canda и

http://demo5454site.com/tour-categories/america, но он никогда не идет на

http://demo5454site.com/tour-categories/one или

http://demo5454site.com/tour-categories/two в качестве второй выпадающий не работает.

скрипку

Demo: https://jsfiddle.net/shall1987/baLxc3gd/

jQuery('.countrygroup select.region-0').show(); 
$('.filter_form select').on('change', function (e) { 
    var cls=$('select option:selected').attr('class'); 
    jQuery('.countrygroup select').hide(); 


    jQuery('.countrygroup select.'+cls).show(); 
    // jQuery(".countrygroup select").val('0');  
}); 

$('.filter_form .waves-button-input').on('click', function (e) { 
e.preventDefault(); 
    // var cls=$('.countrygroup select option:selected').text(); 
var cls_class=$('.countrygroup select option:selected').attr('class');  

if(cls_class!="") 
    { 

    cls_class=cls_class.toLowerCase(); 
    window.location.href="http://demo5454site.com/tour-categories/"+cls_class 
    } 


}); 



}); 
<form class="filter_form"> 
<span class="group"><label>Region</label> 
<span class="wa_select"> 
<select class="region"> 
<option value="blank">~Select Region~</option> 
<option class="region-0">North America</option> 
<option class="region-1">South America</option> 
</select></span></span> 
<span class="group countrygroup"> 
<label>Country</label> 


<span class="wa_select"><select class="region-0" style="display: inline-block;"><option value="0">~Select Country~</option> 
<option class="Canada">Canada</option> 


<option class="America">America</option> 

</select></span> 


<span class="wa_select"><select class="region-1"><option value="0">~Select Country~</option> 
<option class="one">one</option> 


<option class="two">two</option> 

</select></span> 

</span>         


<span class="group"> 
<i class=" waves-input-wrapper waves-effect waves-button waves-light" style="color:rgb(255, 255, 255);background:rgb(242, 139, 31)"><input name="submit" value="Go" type="submit" class="waves-button-input" style="background-color:rgba(0,0,0,0);"></i> 
</span>      </form>       

           <span class="group"> 
               <i class=" waves-input-wrapper waves-effect waves-button waves-light" style="color:rgb(255, 255, 255);background:rgb(242, 139, 31)"><input name="submit" value="Go" type="submit" class="waves-button-input" style="background-color:rgba(0,0,0,0);"></i> 
           </span>      </form> 

Answer 1

Заменить код JS с этим

$ = jQuery; 
$(document).ready(function() { 


    jQuery('.countrygroup select.region-0').show(); 
    $('.filter_form select').on('change', function(e) { 
    var cls = $('select option:selected').attr('class'); 
    jQuery('.countrygroup select').hide(); 


    jQuery('.countrygroup select.' + cls).show(); 
    // jQuery(".countrygroup select").val('0');  
    }); 

    $('.filter_form .waves-button-input').on('click', function(e) { 
    e.preventDefault(); 
    // var cls=$('.countrygroup select option:selected').text(); 
    var region = $(".region option:selected").attr("class"); 

    var cls_class = $(".countrygroup select."+region+" option:selected").attr('class'); 
    console.log(cls_class); 
    if (cls_class != "") { 

     cls_class = cls_class.toLowerCase(); 
     window.location.href = "http://demo5454site.com/tour-categories/" + cls_class 
    } 


    }); 



}); 

Он будет работать

EDIT

Вот jsfiddle link