Mads Hjorth Mads Hjorth - 5 months ago 23
Javascript Question

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

and JS

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

My whole code looks like this

what am i doing wrong?


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:


<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>
<div id="product-description" class="product-description">product-description</div>


function hide_function(a)

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") {
  $("#sel-lease-product").change(); //Again invoking the change function on-load of the page