根据 WooCommerce 中之前的字段集选择禁用/启用字段集

Question

我想问是否有可能有一个 Inactive Model 字段集。我需要 Model 字段集处于活动状态并仅当我首次在品牌字段集中选择 Brand 时才显示相应的模型 。 HTML 代码如下：

<div class="bde-wpgbfacet-464-337 bde-wpgbfacet">
<div class="wpgb-facet wpgb-facet-2" data-facet="2" data-grid="wpgb-content">
<fieldset>
        <legend class="wpgb-facet-title wpgb-sr-only">Μάρκα</legend>
        <div class="wpgb-select-facet"><label><span class="wpgb-sr-only">Select content</span><select class="wpgb-select" name="marka"><option value="">Μάρκα</option><option value="volvo">Volvo</option></select><span class="wpgb-select-controls"><span class="wpgb-select-separator"></span>...</span></label></div></fieldset>
    </div>
</div>
</div>
  

<div class="bde-wpgbfacet-464-338 bde-wpgbfacet">
<div class="wpgb-facet wpgb-facet-3" data-facet="3" data-grid="wpgb-content">
<fieldset>
        <legend class="wpgb-facet-title wpgb-sr-only">Μοντέλο</legend>
        <div class="wpgb-select-facet"><label><span class="wpgb-sr-only">Select content</span><select class="wpgb-select" name="modelo"><option value="">Μοντέλο</option><option value="520d">520d</option></select><span class="wpgb-select-controls"><span class="wpgb-select-separator"></span>....</span></label></div></fieldset>
    </div>
</div>
</div>

Answer 1

要显示隐藏的字段集，在选择品牌时，需要一些 JavaScript (jQuery) 和对 HTML 的一些细微更改（您可以运行以下代码段）:

jQuery(function($){
    $(document.body).on('change', '.bde-wpgbfacet.brand select', function(){
        if( $(this).val() != '' ) {
            $('.bde-wpgbfacet.model fieldset').show();
        } else {
            $('.bde-wpgbfacet.model fieldset').hide();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bde-wpgbfacet-464-337 bde-wpgbfacet brand">
    <div class="wpgb-facet wpgb-facet-2" data-facet="2" data-grid="wpgb-content">
        <fieldset>
            <legend class="wpgb-facet-title wpgb-sr-only">Μάρκα</legend>
            <div class="wpgb-select-facet">
                <label>
                    <span class="wpgb-sr-only">Select content</span>
                    <select class="wpgb-select" name="marka">
                        <option value="">Μάρκα</option>
                        <option value="volvo">Volvo</option>
                    </select>
                    <span class="wpgb-select-controls">
                        <span class="wpgb-select-separator"></span>...
                    </span>
                </label>
            </div>
        </fieldset>
    </div>
</div>
  
<div class="bde-wpgbfacet-464-338 bde-wpgbfacet model">
    <div class="wpgb-facet wpgb-facet-3" data-facet="3" data-grid="wpgb-content">
        <fieldset style="display:none;">
            <legend class="wpgb-facet-title wpgb-sr-only">Μοντέλο</legend>
            <div class="wpgb-select-facet">
                <label>
                    <span class="wpgb-sr-only">Select content</span>
                    <select class="wpgb-select" name="modelo">
                        <option value="">Μοντέλο</option>
                        <option value="520d">520d</option>
                    </select>
                    <span class="wpgb-select-controls">
                        <span class="wpgb-select-separator"></span>....
                    </span>
                </label>
            </div>
        </fieldset>
    </div>
</div>

现在应该可以工作了。