php if dropdown option value 0 then hide div - php

Question

as I am not experienced with php, I need some help solving my issue.
I pasted the snippet of php I believe needs editing.
<div class="selectBox" id="products-variation-container">
<select class="product-variation-dropdown" name="product-variation" id="sel-product-variation">
<option value="0"><?php _e('Select variation', 'wp-woo-leasing'); ?></option>
</select>
</div>
<!-- <input type="submit" name="btn-submit" class="button alt" id="leasingAddItem" value="<?php _e('Add Item', 'wp-woo-leasing'); ?>"
data-value="<?php _e('Add Item', 'wp-woo-leasing'); ?>" />-->
</div>
</div>
<div class="leasing-single-container" >
<div class="leasing-col1" >
<div id="product-description" class="product-description"></div>
<div id="product-price-details" class="product-price-details"></div>
</div>
My issue is that I want my code to be like:
<select class="product-variation-dropdown" name="product-variation" id="sel-product-variation">
<option value="0"><?php _e('Select variation', 'wp-woo-leasing'); ?>
If option value = "0" then hide the following div, upon loading site, since default is value is 0.
<div id="product-description" class="product-description"></div>
I hope you understand my question, and I hope that you can guide me to approaching this issue, thanks.

Answer 1

You can use jQuery to show and hide div on basis of select value.
Wordpress have already included jquery file, so you no need to add it.
(https://developer.wordpress.org/reference/functions/wp_enqueue_script/).
Here is code you can use:
<div class="selectBox" id="products-variation-container">
<select class="product-variation-dropdown" name="product-variation" id="sel-product-variation" onchange="getval();">
<option value="0">Select Option</option>
<option value="1">Select Option1</option>
</select>
</div>
<div class="leasing-single-container" >
<div class="leasing-col1" >
<div id="product-description" class="product-description">dgsdgsdgsdgsdgsd</div>
<div id="product-price-details" class="product-price-details"></div>
</div>
</div>
<script>
jQuery(document).ready(function() {
var sel = jQuery('select[name=product-variation]').val();
if(sel == 0) {
jQuery('#product-description').attr('style', 'display:none');
}
jQuery('#sel-product-variation').on('change', function() {
var sel = jQuery('select[name=product-variation]').val();
if(sel == 0) {
jQuery('#product-description').attr('style', 'display:none');
}
else {
jQuery('#product-description').attr('style', 'display:block');
}
});
});
</script>
Let me know incase of any concern for the same.