javascript - 如何使用 Jquery 检查所选选择选项的类字段？

Question

我有一些带有表单和选择选项的 HTML，如下所示...

      <select id="typeofrequest" name="type">
        <option value="">PLEASE SELECT</option>
        <option value="email" class="color size font">Logo request</option>
        <option value="email">Image request</option>
...

我在页面下方有一些 div，其中一些具有“大小”类。所以基本上，当有人从选择下拉列表中选择“ Logo 请求”(具有“大小”类)时，我希望它触发其他具有“大小”类的 div 出现/显示(因为它们显示:无; 开始)。

if ($("#typeofrequest option").hasClass("size")) {
        $("div.size").show();
    }

但是，在我当前的代码中，无论我选择哪个选项(即，如果我选择“图像请求”，它仍然显示/显示其他 div)，具有“大小”类的 div 都会显示。很明显我我不了解 select 及其选项的读取方式。有人看到我做错了什么吗？

Answer 1

尝试使用这个:

  $('#typeofrequest').on( 'change', function( e ) {
      if( $(this).find('option:selected').hasClass("size") )
          $('div.size').show();
      else
          $('div.size').hide();
  });

JS Fiddle demo