隐藏基于复选框的下拉选项

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”和 下拉菜单中的“Gouvia”。
• 如果两者都被选中，则显示所有相关选项。

只需要一个起点..我已经找到了如何使用 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 中选择元素（除非使用带有预编码函数的 JS 库，例如 jQuery，它会检查每个选项页面，这可能会降低网站性能，特别是如果您在网站的其他地方有多个表单）。

鉴于 ID 是唯一的，我给元素起了一个名字，这样我们可以选择所有元素并将其编译成一个数组，然后我们可以循环并禁用所有或启用所有基于两个复选框是否被选中。

因为我假设这是仅有的两个可用选项，所以我已经完成了各种 if 语句，否则它需要一个 switch 语句，如果有更多的选项可供选择，那么它会更有效，这是因为您没有在对问题的描述中指定这一点。

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

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

Answer 2

您可以尝试根据下拉列表的 checked 值在选项上设置 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>