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

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>