根据下拉选项值“jQuery 过滤方法”显示/隐藏具有多个属性值的 DIV

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(function() {”中，我过滤了每个 .service-outer DIV，获取每个属性的值，然后将其拆分为数组

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

注意：我出于调试原因附加了变量，我认为当您尝试代码时它会很有用 问题是在执行代码时，它只获取第一个 div 属性值而不是每个 div，然后只显示剩余的两个 DIV

第二个注意事项：我尝试使用过滤器方法将 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>