如何根据表单的另一选项值显示对应表单字段？

首先得提下你现有代码里的几个小问题：

• 第一个<option>标签的value属性写错了，应该是value="n"（少了等于号）
• 你把PHP代码直接嵌套在<select>标签内部了，这不符合HTML规范，<select>里面只能包含<option>或<optgroup>元素，会导致结构错误

下面是修正后的服务端实现方案，完全通过PHP在服务端控制显示：

<label for="resetpw">Reset Password</label>
<select name="resetpw" id="resetpw">
    <option value="n" <?php echo ($_POST['resetpw'] ?? 'n') === 'n' ? 'selected' : ''; ?>>No</option>
    <option value="y" <?php echo ($_POST['resetpw'] ?? 'n') === 'y' ? 'selected' : ''; ?>>Yes</option>
</select>

<?php
// 只有当表单提交且resetpw的值为y时，显示密码输入框
if (isset($_POST['resetpw']) && $_POST['resetpw'] === 'y') {
?>
    <p>
        <label for="password">New Password</label>
        <input type="password" name="password" id="password">
    </p>
<?php
}
?>

说明： #

• 修复了option的属性错误，同时给select加上了id，和label的for属性对应，符合语义化规范
• 使用($_POST['resetpw'] ?? 'n')来避免未提交表单时出现Undefined index的警告（PHP7+支持空合并运算符）
• 密码输入框的label改成了"New Password"，避免和前面的label重复，更清晰
• PHP代码移到了select标签外面，保证HTML结构合法

补充：服务端方案的局限性 #

服务端实现的话，只有在表单提交后才会显示密码输入框，用户选中"Yes"时不会立刻看到输入框，必须提交表单才行。如果想要用户选中选项时即时显示输入框，还是需要配合一点JavaScript（不用jQuery也可以），这里给你一个简单的原生JS方案作为补充：

<label for="resetpw">Reset Password</label>
<select name="resetpw" id="resetpw">
    <option value="n" <?php echo ($_POST['resetpw'] ?? 'n') === 'n' ? 'selected' : ''; ?>>No</option>
    <option value="y" <?php echo ($_POST['resetpw'] ?? 'n') === 'y' ? 'selected' : ''; ?>>Yes</option>
</select>

<!-- 密码输入框默认隐藏，根据选中状态和提交状态显示 -->
<p id="password-container" style="display: <?php echo (isset($_POST['resetpw']) && $_POST['resetpw'] === 'y') ? 'block' : 'none'; ?>;">
    <label for="password">New Password</label>
    <input type="password" name="password" id="password">
</p>

<script>
const resetSelect = document.getElementById('resetpw');
const passwordContainer = document.getElementById('password-container');

resetSelect.addEventListener('change', function() {
    passwordContainer.style.display = this.value === 'y' ? 'block' : 'none';
});
</script>

这个方案兼顾了服务端提交后的状态保留，以及前端即时显示的交互体验，你可以根据需求选择。

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