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

Question

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

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

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

我在页面下方还有另一个 div 如果 selected 选项的 class 等于 [=33=，我想添加一个 class ].我希望这不会发生在 select 过程中，而是在加载时出现在搜索结果页面上。

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

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

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

  }
});

有什么指点吗？

Answer 1

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

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

因此，如果您想等到所有图像或其他外部资源加载完毕，您可以使用 $(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>

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

On page load Add Class to div if the class of the selected option in a dropdown equals a value

jquery

select

options