Question

所以，我只想在选择了一个带有类警告的选项类时显示div。我正在尝试使用以下内容： HTML：＆lt; select id =“country”＆gt; ＆lt; option class =“warning”value =“1”＆gt;选项1＆lt; / option＆gt; ＆lt; option class =“warning”value =“2”＆gt;选项2＆lt; / option＆gt; ＆lt; option class =“noWarning”value =“3”＆gt;选项3＆lt; / option＆gt; ＆lt; option class =“warning”value =“4”＆gt;选项4＆lt; / option＆gt; ＆lt; option class =“noWarning”value =“5”＆gt;选项5＆lt; / option＆gt; ＆lt; option class =“warning”value =“6”＆gt;选项6＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; div id =“hiddendiv”style =“display：none”＆gt; 测试＆LT; / DIV＆GT; 脚本： $（'＃国）。改变（函数（）{ if（$（this）.attr（'class'）=='warning'）{ $（ '＃hiddendiv'）显示（）。 } else if（$（this）.attr（'class'）=='nowarning'）{ $（ '＃hiddendiv'）隐藏（）。 } }）; 我知道我需要以某种方式调用选项类，因为它现在只是找到选择框的类，我想。

Answer 1

您应该在option:selected事件处理程序中查找change，而不是select，因为它本身没有类，然后使用.hasClass()方法

$('#country').change(function () {
  var selected = $(this).find('option:selected');
  $('#hiddendiv').toggle(selected.hasClass('warning'));
});

我在上面的示例中使用了.toggle()方法而不是.show() / hide()，因为如果您想要{{1}，则不需要if语句仅当选定的div具有类option时才会显示。

Demo

Answer 2

我对您的脚本进行了一些编辑，现在工作正常：

$('#country').change(function () {
    var className = $(this).find('option:selected').attr("class");
  if (className == 'warning')
  {
    $('#hiddendiv').show();
  }
  else if (className == 'noWarning'){
    $('#hiddendiv').hide();
  }
});

https://jsfiddle.net/IA7medd/2bn8nLav/

Answer 3

使用(domain.com/).*?(/wp-content)获取所选的选项，然后检查是否存在该类..

option:selected

Answer 4

使用jQuery hasClass方法，而不是检查和等同类属性值，如果需要，可以在将来向option添加更多类。

$('#country').change(function() {
    var $selectedOption = $(this).find('option:selected'),
        $hiddenDiv = $('#hiddendiv');

    $selectedOption.hasClass('warning') ? $hiddenDiv.show() : $hiddenDiv.hide();
});

演示：JSFiddle

如何在<select>中选择div显示选项类？

4 个答案: