使用JQuery获取表单数组下拉框值并控制邮箱输入框显隐

原代码中的错误点 #

• 事件绑定错误：下拉框应使用change事件而非keyup，keyup是针对键盘输入的事件，下拉框选择操作不会触发该事件。
• 选择器错误：绑定事件时用了.status类选择器，但下拉框的class属性中并没有status，正确选择器应为$('#status')（通过id定位元素）。
• 语法错误：if条件语句里多了分号，且误用赋值运算符=而非比较运算符===，导致逻辑判断完全失效。
• 隐藏逻辑不完善：仅隐藏输入框但未处理required属性，会导致表单提交时触发必填验证失败；同时缺少页面加载时的初始状态判断，默认选中的状态不会自动触发显示/隐藏操作。

修正后的完整代码 #

<!-- STATUS --> 
<div class="col-lg-3 col-md-4">
    <?php $err = isset($_SESSION['sys_employees_edit_status_err']) ? 1 : 0; ?>
    <div class="form-group">
        <label for="status" class="mr-1<?php if ($err) { echo ' text-danger'; } ?>"><?php if ($err) { echo '<i class="far fa-times-circle mr-1"></i>'; } echo renderLang($lang_status); ?></label> <span class="right badge badge-success"><?php echo renderLang($label_required); ?></span>
        <select class="form-control required<?php if ($err) { echo ' is-invalid'; } ?>" id="status" name="status" required>
           
           
           <?php
            foreach ($status_arr as $status) {
                echo '<option value="' . $status[0] . '"';
                if (isset($_SESSION['sys_employees_edit_status_val'])) {
                    if ($_SESSION['sys_employees_edit_status_val'] == $status[0]) {
                        echo ' selected';
                    }
                }
                echo '>' . renderLang($status[1]) . '</option>';
            }
            ?>
        </select>
        <?php if ($err) {
            echo '<p class="error-message text-danger mt-1">' . $_SESSION['sys_employees_edit_status_err'] . '</p>';
            unset($_SESSION['sys_employees_edit_status_err']);
        } ?>
    </div>
</div>

<!-- ADMIN EMAL ADDRESS -->
<div class="col-lg-3 col-md-4" id="admin_email_container">
    <div class="form-group">
        <label for="admin_email_address" class="mr-1<?php echo $err ? 'text-danger' : ''; ?>"> <?php echo $err ? '<i class="far fa-times-circle mr-1"></i>' : ''; echo "Admin Email Address" ?></label>
        <span class="right badge badge-success"><?php echo renderLang($label_required); ?></span>
        <input type="text" class="form-control required<?php echo $err ? ' is-invalid' : ''; ?>" id="admin_email_address" name="admin_email_address" placeholder="" required>
    </div>
</div> 

<script>
// 封装控制显示/隐藏的函数
function toggleAdminEmail() {
    const statusVal = $('#status').val();
    const emailContainer = $('#admin_email_container');
    const emailInput = $('#admin_email_address');
    
    if (statusVal === '1') {
        emailContainer.hide();
        emailInput.removeAttr('required'); // 隐藏时移除必填属性，避免表单提交报错
    } else {
        emailContainer.show();
        emailInput.attr('required', 'required'); // 显示时恢复必填属性
    }
}

// 页面加载完成后执行初始状态判断，同时绑定下拉框切换事件
$(document).ready(function() {
    toggleAdminEmail();
    $('#status').change(toggleAdminEmail);
});
</script>

修正说明 #

1. 给邮箱输入框的外层容器添加id="admin_email_container"，隐藏时可以连同标签一起隐藏，页面布局更合理。
2. 封装toggleAdminEmail函数，实现逻辑复用，既处理页面初始状态，也响应下拉框切换操作。
3. 使用hide()/show()方法控制显示隐藏，比直接操作hidden属性更符合jQuery的使用习惯。
4. 同步处理required属性的切换，避免表单提交时的验证错误。

内容的提问来源于stack exchange，提问作者ANGELO CHIQUITO