如果下拉列表中所选选项的类等于一个值，则在页面加载时将类添加到 div

Question

我有一个使用下拉菜单在特定类别中搜索的搜索表单。如果所选选项包含特定类，我需要在搜索结果页面上的 div 中添加一个类。

这是我在搜索表单中的选择选项：

<select  name='product_cat' id='product_cat' class='cat-dropdown hidden-xs' >
<option value='0'>Search All</option>
<option class="level-0" value="antibodies">Antibodies</option>
<option class="level-0" value="chemicals" selected="selected">Chemicals</option>
<option class="level-0" value="elisa-kits">Elisa Kits</option>
<option class="level-0" value="chromatography">Chromatography</option>

如果所选选项的类等于“level-0”，我想在页面下方添加一个类。我希望这不是在选择过程中发生，而是在加载时在搜索结果页面上发生。

这是我目前所拥有的，但我无法让它工作：

$('#product_cat option').load(function(){
  if($(this).val() == 'level-0'){ 

$("#sidebar-fwp-type").addClass("hideme");  // Add class to our facet

  }
});

有什么建议吗？

Answer 1

您想检查所选选项是否具有特定类，但您检查的是值：if($(this).val() == 'level-0')。请注意，从 jQuery 3.0 开始，load() 事件是 deprecated，应该写成 .on( "load", handler ) 而不是 .load( handler )。此外，它并不像您预期​​的那样工作：

当一个元素和所有子元素都有 已完全加载。此事件可以发送到任何元素 与 URL 相关联：图像、脚本、框架、iframe 和 窗口对象。

因此，如果您想等到所有图像或其他外部资源都加载完毕，您可以使用$(window).on('load', function (){})。我将改用$(document).ready();：

$(document).ready(function() {
  if ($("#product_cat option:selected").attr("class") == "level-0") {
    $("#sidebar-fwp-type").addClass("hideme");
  }
});

.hideme {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  name='product_cat' id='product_cat' class='cat-dropdown hidden-xs' >
<option value='0'>Search All</option>
<option class="level-0" value="antibodies">Antibodies</option>
<option class="level-0" value="chemicals" selected="selected">Chemicals</option>
<option class="level-0" value="elisa-kits">Elisa Kits</option>
<option class="level-0" value="chromatography">Chromatography</option>
</select>
<div id="sidebar-fwp-type">
sidebar
</div>