基于复选框隐藏下拉选项

Question

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

Answer 1

Understanding: If I am not misunderstanding your scenario, you are asking for some front end development (HTML, CSS, JavaScript) to be carried out so that drop down options alter based on the users checkbox selection

Modifications Explained From what I can see in your HTML , your using a set of CSS classes intended to style a DIV element as a checkbox and then set values using the data-attribute as a way of reading its value. Personally I feel it is a bit long-winded and you would of been better off making them checkboxes and just style the checkbox using CSS to how ever you feel works best, if your checkboxes are sliders switches then you can include a checkbox that is hidden and that the value of the checkbox is updated from the interactions the user is making.

I have therefore made my code shier basic for you to follow, I will admit this is not the most efficient way of coding it, but its a working example for you to modify to your hearts content.

Note this does not HIDE the options but disables the user from selecting them If you want to hide the option, you will need to next each option in a DIV and set that the CSS display attribute to false. I didnt code it this way as I would have to research how that would fit in with it being HTML compliant.

Code:

 function checkState(x){ var Checkboxes = document.getElementsByName("checkbox"); var Options = document.getElementsByName("options"); for (i = 0; i < Options.length; i++){ Options[i].disabled = true; } if (Checkboxes[0].checked && Checkboxes[1].checked){ for (i = 0; i < Options.length; i++){ Options[i].disabled = false; } } if (Checkboxes[0].checked && (Checkboxes[1].checked == false)){ Options[0].disabled = false; Options[1].disabled = false; } if (Checkboxes[1].checked && (Checkboxes[0].checked == false)){ Options[2].disabled = false; Options[3].disabled = false; } }

 <form> Cefalonia: <input name="checkbox" type="checkbox" class="facetwp-checkbox" value="cefalonia" onclick="checkState(this)"><br> Corfù: <input name="checkbox" type="checkbox" class="facetwp-checkbox" value="corfù" onclick="checkState(this)"> </form> <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 name="options" value="ipsos" disabled>Ipsos</option> <option name="options" value="acharavi" disabled>Acharavi</option> <option name="options" value="dassia" disabled>Dassia</option> <option name="options" value="gouvia" disabled>Gouvia</option> </select> </div>

Understanding what is happening First off we have no ID or Names allocated to the options, this is important because you have no way of selecting the element in JavaScript without it (unless using a JS library with a function pre-coded such as jQuery, that checks every option on the page, which can slow down website performance, specially if you have multiple forms elsewhere on your website).

Given that IDs are to be unique, I have given the elements a name, this way we can select all of them and compile it into an array, which we can then loop thru and disable all or enable all based on both checkboxes being selected or not.

As I am assuming these are the only two options available, I have done various if statements, otherwise it would need a switch statement which would be more efficient if there are more than just kefelonia and corfu as the options to choose from, this is because you didnt specify this in your description to your question.

We then loop thru each value and enable or disable the option based on the checkbox chosen.

Disable them all first, that way if no boxes are chosen there all disabled If we select all options we enable all If we dont, then only display what is relevant

Answer 2

You can try setting the disabled attribute on the option depending on the checked value of the drop down:

 $(".facetwp-dropdown option").each(function(){ $(this).attr('disabled','disabled'); }); $(".facetwp-dropdown").val(""); $('[data-value="cefalonia"]').change(function(){ $(".facetwp-dropdown").val(""); if($(this)[0].checked){ $(".facetwp-dropdown option[value='ipsos'],.facetwp-dropdown option[value='acharavi']").removeAttr('disabled'); } else{ $(".facetwp-dropdown option[value='ipsos'],.facetwp-dropdown option[value='acharavi']").attr('disabled','disabled'); } }); $('[data-value="corfu"]').change(function(){ $(".facetwp-dropdown").val(""); if($(this)[0].checked){ $(".facetwp-dropdown option[value='dassia'],.facetwp-dropdown option[value='gouvia']").removeAttr('disabled'); } else{ $(".facetwp-dropdown option[value='dassia'],.facetwp-dropdown option[value='gouvia']").attr('disabled','disabled'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="facetwp-facet facetwp-facet-isola facetwp-type-checkboxes" data-name="isola" data-type="checkboxes"> <input type="checkbox" data-value="cefalonia">Cefalonia <input type="checkbox" data-value="corfu">Corfù </div> <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>