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，其中一些有“size”类。所以基本上，当有人从Select下拉列表中选择“Logo request”（具有“size”类）时，我想要触发其他具有“size”类的div来显示/显示（因为它们是display：none ;开始）。

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

然而，使用我当前的代码，无论我选择哪个选项，都会显示“size”类的div（即如果我选择“Image request”，它仍会显示/显示其他div。显然我'我不理解选择及其选项如何阅读。任何人都能看到我做错了什么？

Answer 1

尝试使用：

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

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

2 个答案: