Javascript 当下拉列表值为0时隐藏div

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

我相信我应该使用javascript，但我应该使用jQuery吗

我尝试使用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>

我的整个代码看起来像这样

我做错了什么？

试试这个：

$（文档）.ready（函数（）{
$（“#选择租赁产品”）。关于（“更改”，函数（）{
if（$（this）.val（）==0）{
$（“.product description”）.hide（）；
}
}).change（）；
})

1.
0
产品说明

试试这个：

$（文档）.ready（函数（）{
$（“#选择租赁产品”）。关于（“更改”，函数（）{
if（$（this）.val（）==0）{
$（“.product description”）.hide（）；
}
}).change（）；
})

1.
0
产品说明

首先调用

更改

处理程序，以便在页面加载时使用

可以使用，而不是同时使用

jQuery.show

和

jQuery.hide

注意：请使用

JavaScript

或

jQuery

，不要同时使用它们

$（文档）.ready（函数（）{
$（“#选择租赁产品”）.change（函数（）{
$（“.product description”）.toggle（this.value！=0）；
}).change（）；
//-^^^^^^^^
});

0
1.
2.
此处的内容….
首先调用
更改
处理程序，以在页面加载时使用获得预期结果

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

注意：请使用
JavaScript
或
jQuery
，不要同时使用它们


$（文档）.ready（函数（）{
$（“#选择租赁产品”）.change（函数（）{
$（“.product description”）.toggle（this.value！=0）；
}).change（）；
//-^^^^^^^^
});

0
1.
2.
此处的内容……
$（文档）.ready（函数（）{
$（“#选择租赁产品”）.change（函数（）{
if（$（this）.val（）==0）{
$（“.product description”）.hide（）；
}否则{
$（“.productdescription”）.show（）；
}
});
});

选择
0
1.
如果0则隐藏
$（文档）.ready（函数（）{
$（“#选择租赁产品”）.change（函数（）{
if（$（this）.val（）==0）{
$（“.product description”）.hide（）；
}否则{
$（“.productdescription”）.show（）；
}
});
});

选择
0
1.
如果0，则隐藏尝试此代码：

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

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

});

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

结果：
尝试以下代码：

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

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

});

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

结果：
您的代码永远不会重新显示值，因此需要执行if/else类型的检查。很好的一点是jQuery内置了它，因此您可以使用布尔值调用toggle

此外，不需要查找所选选项，val（）将为您执行此操作。为了确保页面加载时元素处于正确的状态，需要触发更改事件


$（“选择租赁产品”）。关于（“更改”，函数（）{
$（“.product description”）.toggle（$（this.val（）！=“0”）；
}).触发（“变更”）

选择
福
Description
您的代码永远不会重新显示值，因此您需要执行if/else类型的检查。很好的一点是jQuery内置了它，因此您可以使用布尔值调用toggle

此外，不需要查找所选选项，val（）将为您执行此操作。为了确保页面加载时元素处于正确的状态，需要触发更改事件


$（“选择租赁产品”）。关于（“更改”，函数（）{
$（“.product description”）.toggle（$（this.val（）！=“0”）；
}).触发（“变更”）

选择
福
说明
如果需要检查select标记中的
onchange（）
值，您可以选择两种方法

直接将
onchange（）
函数写入select标记本身
如果选择ID，则在帮助下调用该函数，以便可以将更改写入脚本本身
方法一：

HTML:

方法二：

在脚本文件本身中直接调用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    
});

如果需要检查select标记中的
onchange（）
值，您可以选择两种方法

直接将
onchange（）
函数写入select标记本身
如果选择ID，则在帮助下调用该函数，以便可以将更改写入脚本本身
方法一：

HTML:

方法二：

在脚本文件本身中直接调用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    
});

onchange=“hideDiv（）”
。。您错过了括号。。还要注意，您没有传递任何参数。
onchange=“hideDiv（）”
。。您错过了括号。。还要注意，您没有传递任何参数。。
<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>

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

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