Question

我处于wordpress环境中，我使用插件facet WP创建了一些过滤后的视图，并放置了两个复选框和一个下拉过滤器。

所以我有以下两个复选框：

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

然后我已经通过插件填充了此下拉列表：

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

我想要的是：

如果我选择第一个复选框Cefalonia，则仅显示下拉菜单中的“ ipsos”和“ acharavi”选项。
如果我选择第二个复选框Corfù，则仅显示选项“ Dassia”，然后下拉菜单中的“古维亚”。
如果两者都选中，则显示所有相关选项。

只需要一个起点。.我已经找到了如何通过2个下拉菜单而不是复选框进行此操作。.我对javascript不太满意，谢谢

Answer 1

理解： 如果我不误解您的情况，那么您正在要求进行一些前端开发（HTML，CSS，JavaScript），以便下拉选项根据用户复选框的选择而改变

说明的修改 从我在 HTML 中所看到的，您使用了一组CSS类，这些类旨在将DIV元素样式设置为复选框，然后使用数据属性设置值作为读取其值的方式。我个人觉得这有点麻烦，最好将它们设置为复选框，然后使用CSS设置该复选框的样式以使其感觉最佳，如果您的复选框是滑块开关，那么您可以包括一个隐藏的复选框并从用户进行的交互中更新复选框的值。

因此，我已将代码基础设为基本内容，我承认这不是对其进行编码的最有效方法，而是为您修改心脏内容而提供的一个有效示例。

请注意，这不会隐藏选项，但会禁止用户选择它们如果要隐藏该选项，则需要在DIV中的每个选项旁边，并将CSS显示属性设置为false。我没有用这种方式编写代码，因为我必须研究如何使其与HTML兼容。

代码：

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>

了解正在发生的事情 首先，我们没有为选项分配ID或名称，这很重要，因为如果没有它，您将无法选择JavaScript中的元素（除非使用带有jQuery之类预编码功能的JS库，它会检查每个选项该页面，这可能会降低网站性能，特别是如果您在网站上的其他位置有多个表单）。

考虑到ID是唯一的，我给元素指定了一个名称，这样我们就可以选择所有ID并将其编译成一个数组，然后我们可以遍历并禁用所有或基于两个复选框启用所有ID是否被选中。

由于我假设这是仅有的两个选项，所以我做了各种if语句，否则它将需要一个switch语句，如果要选择的不仅仅是kefelonia和corfu，这将更有效率，这是因为您没有在问题描述中指定此内容。

然后，我们遍历每个值，并根据选中的复选框启用或禁用该选项。

首先全部禁用它们，这样，如果未选择任何框，则全部禁用如果选择所有选项，则启用所有如果我们不这样做，则仅显示相关内容

Answer 2

您可以尝试根据下拉菜单的选中值在该选项上设置 disabled 属性：

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

根据复选框隐藏下拉菜单选项

2 个答案: