WordPress/WooCommerce表单下拉选择的条件显示功能实现求助

原代码的核心问题 #

• 选项值不匹配：HTML下拉选项的value是select one/select two/select three，但jQuery判断用的是select 1/select 2/select 3，完全不对应
• jQuery语法混用：WordPress默认启用jQuery兼容模式，$别名未定义，不能混用$和jQuery
• 动画参数错误：show('visible')、hide('visible')是无效写法，visible不是合法的动画效果参数
• 默认选项判断错误：默认选项的value是Select One -->，不是0，判断条件完全错误
• 未初始化隐藏：页面加载时未默认隐藏额外字段，导致初始状态所有字段都显示

修复后的完整代码 #

HTML（修正了第三个选项的文本错误）

<select name="select-menu" id="select-menu" class="select " required="required" data-placeholder="">
  <option value="Select One --&gt;" >Select One --&gt;</option>
  <option value="select one" >First Selection</option>
  <option value="select two" >Second Selection</option>
  <option value="select three" >Third Selection</option>
</select>

<p class="form-row " id="input1" data-priority="10"><label></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="input-one" id="input-one" placeholder="" value=""></span></p>
<p class="form-row " id="inputtwo" data-priority="20"><label></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="input-two" id="input-two" placeholder="" value=""></span></p>
<p class="form-row " id="thirdinput" data-priority="30"><label></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="input-three" id="input-three" placeholder="" value=""></span></p>

jQuery代码（适配WordPress环境）

jQuery(document).ready(function($) {
    // 页面加载时默认隐藏所有额外字段
    $('#input1, #inputtwo, #thirdinput').hide();

    $('#select-menu').change(function() {
        // 先隐藏所有字段，再显示选中项对应的字段
        $('#input1, #inputtwo, #thirdinput').hide('fast');
        
        const selectedValue = $(this).val();
        if (selectedValue === 'select one') {
            $('#input1').show('fast');
        } else if (selectedValue === 'select two') {
            $('#inputtwo').show('fast');
        } else if (selectedValue === 'select three') {
            $('#thirdinput').show('fast');
        }
        // 默认选项时保持所有字段隐藏，无需额外判断
    });
});

额外说明 #

• 用jQuery(document).ready(function($) {...})包裹，既确保DOM加载完成后执行，又能在内部使用$别名
• 每次切换下拉选项时先隐藏所有字段，避免多个字段同时显示
• 统一使用fast作为动画效果，也可以换成slow或者直接省略参数（无动画）

内容的提问来源于stack exchange，提问作者Adam Bell