根据下拉选项值“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>');