javascript - 如何让 div 出现在 <select> 中选择的选项类？

Question

因此，仅当选择了带有 warning 类的选项类之一时，我才想显示 div。我正在尝试使用以下内容来做到这一点:

HTML:

<select id="country">
    <option class="warning" value="1">Option 1</option>
    <option class="warning" value="2">Option 2</option>
    <option class="noWarning" value="3">Option 3</option>
    <option class="warning" value="4">Option 4</option>
    <option class="noWarning" value="5">Option 5</option>
    <option class="warning" value="6">Option 6</option>    
</select>

<div id="hiddendiv" style="display:none">
    Test
</div>

脚本:

$('#country').change(function(){
    if ($(this).attr('class') == 'warning'){
        $('#hiddendiv').show();
    }else if ($(this).attr('class') == 'nowarning'){
        $('#hiddendiv').hide();
    }
});

我知道我需要以某种方式调用选项类，因为我认为它目前只是查找选择框的类。

Answer 1

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

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

我用过.toggle()方法而不是上面示例中的 .show()/hide() ，因为如果您想要仅当所选选项具有类警告时才显示div。

Demo