CODEWITHSUNDEEP
javascriptjquery
Mads Hjorth
Mads Hjorth

Reputation: 447

Hide div when dropdown value is 0

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?

Upvotes: 0

Views: 71

Answers (6)

Naresh Kumar P
Naresh Kumar P

Reputation: 4210

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

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

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>

Upvotes: 0

epascarello
epascarello

Reputation: 207521

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>

Upvotes: 0

Rayon
Rayon

Reputation: 36599

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>

Upvotes: 2

CMedina
CMedina

Reputation: 4222

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/

Upvotes: 2

Marcos Alexandre Sedrez
Marcos Alexandre Sedrez

Reputation: 537

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

Upvotes: 0

Related Questions