Hide div, wenn der Dropdown-Wert 0 ist 0

Question

Ich habe eine Formel-Seite, wo die Dropdown-Menüs einen Standardwert = 0 hat. Ich möchte es ein Div ausblenden, wenn der Wert = 0, auch wenn die Seite geladen ist.

Ich glaube, ich sollte Javascript verwenden, aber sollte ich jQuery verwenden?

ich versuchte mit und ohne jQuery, aber konnte meinen Code nicht zum Funktionieren bringen.

Dies ist die Drop-Down-

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

Dies ist das div i verstecken wollen.

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

Ich habe versucht, diese

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> 

und JS

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

Mein ganzer Code sieht wie folgt aus http://pastebin.com/WTFu3Hte

, was mache ich falsch?

Answer 1

Wenn Sie den onchange() Wert überprüfen müssen, die aus dem select-Tag ist, können Sie zwei Methoden bevorzugen

1. direkt die onchange() Funktion dem select-Tag schreiben selbst
2. Rufen Sie die Funktion mit der Hilfe auf, wenn Sie ID auswählen, so dass Sie on schreiben können, um zum Skript selbst zu wechseln.

Methode eins:

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

Methode zwei:

Die Funktion on change direkt in der Skriptdatei aufrufen.

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

Versuchen Sie folgendes:

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

Rufen Sie die change Handler zunächst erwartete Ergebnisse auf Seite Last zu erreichen jQuery.change() verwenden. sie verwenden entweder von JavaScript oder jQuery, verwenden Sie nicht zusammen:

jQuery.toggle könnte anstelle der Verwendung von sowohl jQuery.show und jQuery.hide

Hinweis verwendet werden!

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

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

diesen Code Versuchen:

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

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

}); 

Wenn Sie den Code ausführen möchten, wenn die Seite Last erinnern das Ereignis Änderung laufen Ihre Auswahl

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

Answer 6

Nun Ihr Code wird nie den Wert wieder aufführen, so dass Sie, wenn/else Art der Prüfung tun müssen. Das Schöne ist, dass jQuery es eingebaut hat, so dass Sie einfach mit einem booleschen Toggle aufrufen können.

Auch gibt es keine Notwendigkeit, nach der ausgewählten Option zu suchen, val() wird das für Sie tun. Um sicherzustellen, dass das Element beim Laden der Seite den richtigen Status aufweist, möchten Sie das Änderungsereignis auslösen.

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