當下拉值為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

最初調用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> 

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()值，則可以使用兩種方法

1. 直接將onchange()函數寫入select標記本身
2. 如果選擇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

嘗試這個 ：

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

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內置了它，因此您只需用布爾值調用toggle即可。

同樣也不需要尋找選定的選項，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>