Hide div when dropdown value is 0

Question

I have a formula page where the dropdowns has a default value = 0. I would like it to hide a div when the value is = 0, even when the page is loaded.

I believe i should use javascript, but should i use jQuery?

i tried with and without jQuery, but couldn't get my code to work.

This is the dropdown

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

This is the div i want to hide.

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

i tried this 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>

and JS

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

My whole code looks like this http://pastebin.com/WTFu3Hte

what am i doing wrong?

Answer 1

Invoke the change handler initially to achieve expected results on page load using jQuery.change() .

jQuery.toggle could be used instead of using both jQuery.show and jQuery.hide

Note: Use either of JavaScript or jQuery , do not use them together!

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

Try this code:

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

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

});

If you want execute the code when the page is load remember to run the event change your select

Result: https://jsfiddle.net/cmedina/mwz5udwz/

Answer 3

If you need to check the onchange() value that is from the select tag you can prefer two methods

1. Directly write the onchange() function to the select tag itself
2. Invoke the function with the help if select ID so that you can write the on change over to the script itself.

Method One:

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

Method Two:

Directly calling the on change function in the script file itself.

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

Try this :

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

Well your code will never reshow the value so you need to do if/else type of check. The nice thing is jQuery has it built in so you can just call toggle with a boolean.

Also there is not need to look for the selected option, val() will do that for you. And to make sure the element is in the correct state when the page loads, you want to trigger the change event.

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