How to use Jquery to check class field on chosen select option?

Question

I have some HTML with a form and a select option like the one below...

      <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>
...

I have some divs further down the page and SOME of them have the class of "size". So basically, when someone chooses "Logo request" (which has the class of "size") from the Select dropdown, I want that to trigger the other divs with class of "size" to appear/show (since they are display: none; to start).

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

However, with my current code, the divs with the class of "size" display no matter which select option I choose (ie if I chose "Image request" it still then reveals/shows the other divs. So clearly I'm not understanding something with how select and its options are read. Anyone see what I'm doing wrong?

Answer 1

Try using this:

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

JS Fiddle demo

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();
        }
    });