如何使用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，其中一些具有“尺寸”类。 因此，基本上，当某人从“选择”下拉列表中选择“徽标请求”（类别为“大小”）时，我希望它触发其他显示“类别”的div出现/显示（因为它们显示：无） ; 开始）。

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

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

Answer 1

尝试使用此：

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

JS小提琴演示

Answer 2

You can try this:

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