mercredi 23 janvier 2019

Hide dropdown option based on checkbox

I'm in a wordpress environment, I have created some filtered post views using the plugin facet WP and I have placed two checkboxes and a dropdown filter.

So I have these 2 checkboxes:

<div class="facetwp-facet facetwp-facet-isola facetwp-type-checkboxes" 
data-name="isola" data-type="checkboxes">
    <div class="facetwp-checkbox" data-value="cefalonia">Cefalonia <span 
class="facetwp-counter">(11)</span>
    </div>
    <div class="facetwp-checkbox" data-value="corfu">Corfù <span     
class="facetwp-counter">(28)</span>
    </div>
</div>

And then I have this dropdown already populated by the plugin:

<div class="facetwp-facet facetwp-facet-localita_di_corfu facetwp-type- 
dropdown" data-name="localita_di_corfu" data-type="dropdown">
<select class="facetwp-dropdown">
    <option value="ipsos">Ipsos</option>
    <option value="acharavi">Acharavi</option>
    <option value="dassia">Dassia</option> 
    <option value="gouvia">Gouvia</option> 
</select>
</div>

What I want is:

  • if I select the first checkbox Cefalonia, then show only options "ipsos" and "acharavi" in the dropdown.
  • if I select the second checkbox Corfù then show only options "Dassia" and "Gouvia" in the dropdown.
  • if both are selected show all the related options.

just need a starting point.. I have found how to do this with 2 dropdowns but not with checkboxes.. I'm not so good with javascript many thanks




Aucun commentaire:

Enregistrer un commentaire