Question

我有两个下拉菜单和一个按钮，根据选择它从我的第一个选项加拿大和美国作品到特定网址，但南区选项不起作用。

例如。它适用于http://demo5454site.com/tour-categories/canda和

http://demo5454site.com/tour-categories/america但它永远不会进入

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

http://demo5454site.com/tour-categories/two第二次下拉列表无效。

拨弄

演示：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
    }


  });



});

它会起作用

修改

这是jsfiddle link

jquery根据两个下拉列表更改位置

1 个答案: