JQuery hideドロップダウンの値に応じてチェックボックス

Question

JQueryを使用して、選択したdivの値に応じてチェックボックスの表示を変更したいと考えています。具体的には、facetwp-facet-cityドロップダウンで 'Berlin'が選択されている場合、「Neukölln」と「Mitte」チェックボックスを非表示にしたいと考えています。私はこれがJQueryを使って可能であることを知っていますが、残念ながら私のスキルはそれほど高レベルではありません（まだ）。どんな助けでも大歓迎です！スクリーンショットでは、「ベルリン」の値とMitteのチェックボックスを強調表示しました。ここでは、いくつかのインスピレーション市のコードを撮影

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

すると、このような何かを試してみてください：

スクリーンショットのURLです。前進を助けるために、何かがうまくいかない場合は、コンソールにエラーをドロップしてからデバッグしようとしているかどうかを確認するか、または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(); 
     } 
     }); 
    }  
    }); 
}); 

Answer 2

可能なソリューションです：https://www.wgeil.de/listings/?fwp_city=berlin