如果下拉列表中所选选项的类等于一个值，则在页面加载中将类添加到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”，则我想在页面的下方再添加一个div。我希望这不会在选择过程中发生，但会在加载时出现在搜索结果页面上。

这是我到目前为止所拥有的，但是我无法使它正常工作：

$('#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')。请注意，load()功能用于load data from the server and place the returned HTML into the matched elements，因此，一旦使用$(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>