javascript - 当下拉值为 0 时隐藏 div

Question

我有一个公式页面，其中下拉菜单的默认值 = 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

我做错了什么？

Answer 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/