JQuery Checkbox ausblenden je nach Dropdown-Wert

Question

Ich möchte JQuery verwenden, um die Anzeige von Kontrollkästchen ändern den Wert eines ausgewählten div abhängig. Insbesondere möchte ich die Checkboxen "Neukölln" und "Mitte" ausblenden, wenn "Berlin" im Dropdown-Menü "facetwp-facet-city" ausgewählt wird. Ich weiß, dass dies mit JQuery möglich ist, aber leider sind meine Fähigkeiten (noch) nicht auf diesem Niveau. Jede Hilfe würde sehr geschätzt werden! Im Screenshot habe ich den Wert 'Berlin' und die Checkbox Mitte markiert.

Der Screenshot URL ist: https://www.wgeil.de/listings/?fwp_city=berlin

Answer 1

so etwas wie dieses Versuchen:

$(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

Inspiration shi Code machen, hier ist eine mögliche Lösung. Aushelfen vorwärts gehen, wenn etwas nicht funktioniert, wollen kann, um zu sehen, ob es Fehler in der Konsole fällt (und dann versuchen, und debuggen sie), oder möglicherweise einige console.log(/* some variable */); Aussagen zur Liste hinzufügen, was von einigen der Wähler zurückgegeben wird , mit dem Sie herausfinden können, wo etwas schief läuft (oder Sie zumindest auf eine bestimmte Frage hinweist).

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