选择选项时,JQuery隐藏Div

时间:2011-03-16 16:31:42

标签: jquery class select hide option

我想在选择特定OPTION值时隐藏DIV类

    <select id="tagtype" name="type">
        <option value="type_s">Standard</option>
        <option value="type_o">Overstock</option>
        <option value="type_snd">Scratch &amp; Dent</option>
        <option value="type_mult">Multiples</option>
    </select>

<div class="multiples>stuff here</div>

<script type="text/javascript"> 
$(document).ready(function() {
  if ($("#tagtype option[value='type_mult']").length)
   $("multiples").css('display','none');

});
</script>

2 个答案:

答案 0 :(得分:6)

更好的方法可能是以下内容:

jQuery(document).ready(function() {
   jQuery("#tagtype").change(function() {
      if(jQuery(this).find("option:selected").val() == "type_mult") {
         jQuery(".multiples").hide();
      }
   });
});

您将处理程序绑定到选择框的onChange事件。每当您在选择框中选择一个新选项时,都会调用该处理程序。

在处理程序中,this指的是触发onChange事件的选择框。您查找所选选项的值。如果此值等于“type_mult”,则使用类multiples隐藏所有元素。

现有代码存在的问题是它只会运行一次;当页面首次完成加载时。您需要响应选择框中的更改,这就是您需要绑定到onChange事件的原因。另一个问题是if语句。即使您在onChange处理程序中使用了代码,它也会在每种类型中输入if块,因为您没有检查是否选择了带有“type_mult”值的选项。你只是检查它是否存在。由于始终存在,if内的代码将始终运行。此外,如果要使用类名,则需要在类名前面加上句点。所以你想$(.multiples)而不只是$(multiples)(后者会搜索名为multiples的标签,这不是你想要的。)

答案 1 :(得分:0)

需要更多信息 - 运行此代码时实际发生了什么?

我的猜测是第二个jQuery选择器错了:

$(".multiples").css('display','none');