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(); 
     } 
     }); 
    }  
    }); 
});