下拉值为 0 时隐藏 div答案

【问题标题】：Hide div when dropdown value is 0下拉值为 0 时隐藏 div
【发布时间】：2016-09-29 16:36:45
【问题描述】：

我有一个公式页面，其中下拉列表的默认值 = 0。我希望它在值为 = 0 时隐藏一个 div，即使在加载页面时也是如此。

我认为我应该使用 javascript，但我应该使用 jQuery 吗？

我尝试了使用和不使用 jQuery，但无法让我的代码正常工作。

这是下拉菜单

<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hideDiv">
    <option value="0"><?php _e('Select product', 'wp-woo-leasing'); ?></option>

这是我要隐藏的 div。

<div id="product-description" class="product-description"></div>

我试过这个 JS

                  <script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#sel-lease-product").change(function() {
if(jQuery(this).find("option:selected").val() == 0) {
  jQuery(".product-description").hide();
}
});
});
</script>

和JS

function hideDiv(elem) {
  if(elem.value == 0){
  document.getElementById("product-description").style.display  = "none";
}         }

我的整个代码看起来像这样http://pastebin.com/WTFu3Hte

我做错了什么？

【问题讨论】：

onchange="hideDiv()".. 你错过了() => 括号.. 还要注意你没有传递任何参数..

标签： javascript jquery

【解决方案1】：

试试这个代码：

$(document).ready(function() {
   $("#sel-lease-product").change(function() {
   if($(this).val() === "0") {
      $(".product-description").hide();
   }else{
      $(".product-description").show();
   }
  });

  $("#sel-lease-product").change();

});

如果您想在页面加载时执行代码，请记住运行事件更改您的选择

结果： https://jsfiddle.net/cmedina/mwz5udwz/

【讨论】：

【解决方案2】：

最初调用change 处理程序以使用jQuery.change() 实现页面加载的预期结果。

可以使用jQuery.toggle，而不是同时使用jQuery.show 和jQuery.hide

注意：请使用JavaScript 或jQuery，不要一起使用！

$(document).ready(function() {
  $("#sel-lease-product").change(function() {
    $(".product-description").toggle(this.value != 0);
  }).change();
  //-^^^^^^^^
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<div class="product-description">Content here....</div>

【讨论】：

【解决方案3】：

如果您需要检查来自 select 标记的 onchange() 值，您可以选择两种方法

直接将onchange()函数写入select标签本身
如果选择 ID，请在帮助下调用函数，以便您可以将 on 更改写入脚本本身。

方法一：

HTML：

<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hide_function(this.value);">
<option value="">Please Select</option>
<option value="0">Zero</option>
<option value="1">One</option>
</select>
<div id="product-description" class="product-description">product-description</div>

JS：

function hide_function(a)
{
if(a=='0')
{
 $('#product-description').hide();
}
else
{
$('#product-description').show();
}
}

方法二：

直接调用脚本文件本身的on change函数。

$(document).ready(function() {
   $("#sel-lease-product").change(function() {
   if($(this).val() === "0") {
      $(".product-description").hide();
   }else{
      $(".product-description").show();
   }
  });    
  $("#sel-lease-product").change(); //Again invoking the change function on-load of the page    
});

【讨论】：

【解决方案4】：

$(document).ready(function() {
  $("#sel-lease-product").change(function() {
    if($(this).val() == 0) {
      $(".product-description").hide();
    }else{
      $(".product-description").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="products-dropdown" name="lease-product" id="sel-lease-product">
  <option value="">select</option>  
  <option value="0">0</option>
  <option value="1">1</option>
</select>

<div id="product-description" class="product-description">Hide if 0</div>

【讨论】：

【解决方案5】：

您的代码永远不会重新显示该值，因此您需要进行 if/else 类型的检查。好消息是 jQuery 内置了它，因此您可以使用布尔值调用切换。

此外，您无需查找选定的选项，val() 会为您完成。并且为了确保页面加载时元素处于正确的状态，您需要触发 change 事件。

$("#sel-lease-product").on("change", function() {
  $(".product-description").toggle($(this).val() !== "0");
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel-lease-product">
  <option value="0">Pick</option>
  <option value="1">FOO</option>
</select>

<div class="product-description">Description</div>

【讨论】：

【解决方案6】：

试试这个：

 $(document).ready(function() {
     
     $("#sel-lease-product").on("change",function(){
         
         if($(this).val() == 0) {
             
               $(".product-description").hide();
             
         }
     }).change();
 })

<select class="products-dropdown" name="lease-product" id="sel-lease-product">
  
  <option value="1">1</option>
  <option value="0">0</option>
</select>

<div id="product-description" class="product-description">product-description</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

【讨论】：