如何使用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();
        }
    });