php如果下拉选项值0然后隐藏div

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.

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.