JQuery根据下拉列表隐藏复选框

Question

我想使用JQuery根据选定div的值更改复选框的显示。具体而言，如果在facetwp-facet-city下拉列表中选择了“Berlin”，我想隐藏“Neukölln”和“Mitte”复选框。我知道这是可能的使用JQuery，但不幸的是我的技能还不是那个水平（还）。任何帮助将非常感激！在截图中，我突出显示了“柏林”值和Mitte复选框。

截图的网址为：https://www.wgeil.de/listings/?fwp_city=berlin

Answer 1

尝试是这样的：

$(document).ready(function() { 
    $('.facetwp-dropdown').on('change', function(e) { 
    if ($(this).val() == 'berlin') 
     $('.facetwp-checkbox').each(function(i, v) { 
     if ($(this).data("value") == 'mitte') { 
      $(this).hide(); 
     } 
     if ($(this).data("value") == 'neukolln') { 
      $(this).hide(); 
     } 
     }) 
    }) 
}); 

Answer 2

以一定的启发市的代码，这里是一个可能的解决方案。为了帮助你继续前进，如果某些东西不起作用，你可能想看看它是否会在控制台中丢失错误（然后尝试并调试它们），或者添加一些console.log(/* some variable */);语句来列出某些选择器返回的内容，这可能会让你弄清楚事情失败的地方（或者至少让你指出一个特定的问题）。

// formatting for readability. 
$(document).ready(function() { 
    // Should trigger callback function on change in dropdown. 
    $('.facetwp-dropdown').on('change', function(e) { 

    // Should set the value of the selected dropdown option. 
    let selectedOption = $(this).find(':selected').prop('value'); 

    // Conditional if option equals berlin. 
    if (selectedOption == 'berlin') { 
     // Grab all checkboxes using their parent div. 
     let checkboxes = $('.facet-wrapper').children(); 

     // Use jQuery.each method to iterate over the child elements. 
     $.each(checkboxes, function(index, value) { 
     // Set value of the data attribute. 
     let attribute = $(value).attr('data-value'); 

     // Check data attribute value against either option. 
     if (attribute == 'neukolln' || attribute == 'mitte') { 
      // Hide div if conditional evaluates true. 
      $(value).hide(); 
     } 
     }); 
    }  
    }); 
});