JQuery 在选择选项时隐藏 Div

Question

我想在选择特定选项值时隐藏 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>

Answer 1

更好的方法可能如下所示:

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

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

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

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