CODEWITHSUNDEEP
jqueryselect
Rakhi
Rakhi

Reputation: 929

jquery change location based on two dropdown

I have two dropdowns and a button and based on selection it goes to specific url here from my first option canada and america works but for south region option does not work.

For eg. it works fine for http://demo5454site.com/tour-categories/canda and

http://demo5454site.com/tour-categories/america but it never goes to

http://demo5454site.com/tour-categories/one or

http://demo5454site.com/tour-categories/two as second dropdown not working.

fiddle

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>

Upvotes: 0

Views: 143

Answers (1)

Rahul
Rahul

Reputation: 18567

Replace your js code with this

    $ = 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
    }


  });



});

It will work

EDIT

Here is jsfiddle link

Upvotes: 1

Related Questions