JQuery隐藏Checkbox取决于下拉值

Question

我想使用JQuery根据所选div的值更改复选框的显示。具体来说，如果在facetwp-facet-city下拉列表中选择“柏林”，我想隐藏“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

采取一些灵感shi的代码，这是一个可能的解决方案。为了帮助继续，如果某些东西不起作用，你可能想看看它是否在控制台中丢失错误（然后尝试调试它们），或者可能添加一些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();
        }
      });
    }    
  });
});