根据变体下拉选择显示自定义字段

Question

编辑：解决方案是将jQuery代码放在header.php

中

我有一些客人的下拉菜单。下面是我添加的自定义字段，客户需要填写。我遇到的问题是我希望隐藏字段，直到客户在下拉列表中选择4+值。

这就是我现在所拥有的，但它不起作用：

下拉值：

<select id="no-of-guests" class="" name="attribute_no-of-guests" data-attribute_name="attribute_no-of-guests" "="" data-show_option_none="yes">

  <option value="">Choose No. of Guests</option>

  <option value="2" class="attached enabled">2</option>

  <option value="3" class="attached enabled">3</option>

  <option value="4+" class="attached enabled">4+</option>

</select>

当选择选项值4+时显示DIV

<div class="wccpf-fields-group-1">  

    <table class="wccpf_fields_table  no-of-guests-wrapper" cellspacing="0">
        <tbody>
            <tr>
                <td class="wccpf_label"><label class=" no-of-guests-label" for="no_of_guests">No. of Guests</label></td>
                <td class="wccpf_value">
                                        <input type="number" class="wccpf-field no-of-guests" name="no_of_guests" value="" placeholder="Please enter the number of guests arriving" min="6" max="" step="1" wccpf-type="number" wccpf-pattern="number" wccpf-mandatory="no">
                    <span class="wccpf-validation-message wccpf-is-valid-1">This field can't be Empty</span>
                                    </td>
            </tr>
        </tbody>
    </table>

</div>

最后是jQuery：

   jQuery(document).ready(function () {
        jQuery(document).on('change', '#no-of-guests',  function () {
            if(jQuery("#no-of-guests").val() == "4+"){
                jQuery(".wccpf-fields-group-1").show();
            } else {
                jQuery(".wccpf-fields-group-1").hide();
            }
        });     
    });

...和CSS：

.wccpf-fields-group-1{display:none;}