Question

因为我对php没有经验，所以我需要一些帮助来解决我的问题。

我粘贴了我认为需要编辑的php片段。

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

我的问题是我希望我的代码如下：

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

如果选项值=＆＃34; 0＆＃34;然后在加载网站时隐藏以下div，因为默认值为0。

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

我希望你理解我的问题，我希望你可以指导我解决这个问题，谢谢。

Answer 1

您可以使用jQuery根据选择值显示和隐藏div。

Wordpress已经包含了jquery文件，因此您无需添加它。（https://developer.wordpress.org/reference/functions/wp_enqueue_script/）。

以下是您可以使用的代码：

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

让我知道对此有任何担忧。

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

1 个答案: