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

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

可以使用

jQuery.toggle代替同时使用jQuery.show和jQuery.hide

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这段代码：

$(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/

Answer 3

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

直接将onchange()函数写入select标记本身
如果选择ID，则使用帮助调用该函数，以便您可以将更改写入脚本本身。

方法一：

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

Answer 4

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

$(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>

Answer 6

那么你的代码永远不会重新显示值，所以你需要做if / else类型的检查。好的是jQuery内置它，所以你可以用布尔值调用切换。

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

$("#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>

当下拉值为0时隐藏div

6 个答案: