根据下拉选项值"jQuery Filter Method“显示/隐藏具有多个属性值的DIVs

Question

我尝试显示/隐藏多个服务，每个服务都有一个名为data-serviceregion的自定义属性，根据每个下拉选择选项的单个值，每个服务可以有多个值，也可以没有多个值

<form class="book-now">
<select name="region" id="region">
<option value="">choose region</option>
<option data-regionid="70" value="region-1">region-1</option>
<option data-regionid="71" value="region-2">region-2</option>
</select>


<div id="bookingservices" style="display: none;">

<div data-serviceregion="70,71" class="service-outer" style="display: block; width:50px;height:50px;background:red;margin: 10px 10px 10px 10px;text-align:center;">
<div class="service-name"><h5>Cs a c</h5></div>
<div class="service-price">5000.00&nbsp;</div>
</div>

<div data-serviceregion="71" class="service-outer" style="display: block;width:50px;height:50px;background:red;margin: 10px 10px 10px 10px">
<div class="service-name"><h5>Re a c</h5></div>
<div class="service-price">2000.00&nbsp;</div>
</div>

<div data-serviceregion="70" class="service-outer" style="display: block;width:50px;height:50px;background:red;margin: 10px 10px 10px 10px">
<div class="service-name"><h5>Cs a h</h5></div>
<div class="service-price">5000.00&nbsp;</div>
</div>
</div>
</form>

所以基本上在这一行“jQuery(‘.service-outer’).filter(.filter() {”)中，我过滤了每个.service-outer，获取它们每个属性的值，然后将其拆分为数组

然后使用inArray方法检查dropdown选项的值是否在前面创建的数组中，最后根据它是否在数组中的条件显示或隐藏它

注意:我附加这个变量是为了调试，因为我认为它在您尝试代码时会很有用问题是，在执行代码时，它只接受第一个div属性值，而不是每个div，然后只显示剩下的两个div

第二个注意:我已经尝试使用filter方法来比较regionid的单个值和data-serviceregion的单个值，它只适用于具有一个数字的服务

jQuery('select[name="region"]').change(function(){

    var region = jQuery(this).val();

    var regionid = jQuery(this).find(':selected').data("regionid");

    if(region != "") {
        jQuery("#bookingservices").show();  

        jQuery('.service-outer').filter(function() {
  var serregs = jQuery(this).data("serviceregion");
  var serreg = serregs.split(",");
            if ( jQuery.inArray(regionid, serreg)!=-1 ) {
            jQuery(this).show();
    jQuery("#bookingservices").append('<p>'+serreg+'</p>');
            }
    else {
    jQuery("#bookingservices").append(serreg);
    jQuery(this).hide();

    }  


        });
    }else{
        jQuery("#bookingservices").hide();  
    }
    });

Answer 1

你得到一个值(在第二个和第三个div上)，没有,，所以当拆分它时会产生错误。这就是你的代码不能工作的原因。

试着这样做。

​

jQuery('select[name="region"]').change(function(){

  var region = jQuery(this).val();

  var regionid = jQuery(this).find(':selected').data("regionid")+'';

  if(region != "") {
    jQuery("#bookingservices").show();  
    jQuery('.service-outer').filter(function() {
      var serregs = jQuery(this).data("serviceregion")+''; //here you get a single value(on  second and third divs) with out , so while splitting it produces error.
      var serreg = serregs.split(",");
      if ( jQuery.inArray(regionid, serreg)!=-1 ) {
        jQuery(this).show();
        jQuery("#bookingservices").append('<p>'+serreg+'</p>');
      }
      else {
        jQuery(this).hide();
      }  


    });
  }else{
    jQuery("#bookingservices").hide();  
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="book-now">
  <select name="region" id="region">
    <option value="">choose region</option>
    <option data-regionid="70" value="region-1">region-1</option>
    <option data-regionid="71" value="region-2">region-2</option>
  </select>


  <div id="bookingservices" style="display: none;">

    <div data-serviceregion="70,71" class="service-outer" style="display: block; width:50px;height:50px;background:red;margin: 10px 10px 10px 10px;text-align:center;">
      <div class="service-name"><h5>Cs a c</h5></div>
      <div class="service-price">5000.00&nbsp;</div>
    </div>

    <div data-serviceregion="71" class="service-outer" style="display: block;width:50px;height:50px;background:red;margin: 10px 10px 10px 10px">
      <div class="service-name"><h5>Re a c</h5></div>
      <div class="service-price">2000.00&nbsp;</div>
    </div>

    <div data-serviceregion="70" class="service-outer" style="display: block;width:50px;height:50px;background:red;margin: 10px 10px 10px 10px">
      <div class="service-name"><h5>Cs a h</h5></div>
      <div class="service-price">5000.00&nbsp;</div>
    </div>
  </div>
</form>

​