如何在WordPress中实现下拉选择框选不同选项显示对应内容

你需要同时修改前端下拉框代码和后端判断逻辑，可根据是否需要无刷新交互选择以下两种方案：

方案1：服务端提交后渲染（和你现有逻辑适配） #

第一步：修改HTML下拉框代码 #

把第三个选项的value和显示文本替换为Transgender：

<select name="select_value">
  <option value="male">Male</option>
  <option value="female">Female</option>
  <option value="transgender">Transgender</option>
</select>

第二步：修改PHP判断逻辑 #

新增Transgender的判断分支，同时补充参数存在性校验避免未提交时报PHP警告：

// 先判断参数是否存在
if(isset($_POST['select_value'])) {
    $select_val = $_POST['select_value'];
    if($select_val == 'male') {
        echo "Hi I am Male";
    } elseif($select_val == 'female') {
        echo "Hi I am female";
    } elseif($select_val == 'transgender') {
        echo "Hi I am transgender";
    }
}

方案2：前端无刷新实时显示（无需提交表单） #

如果不需要提交表单就能实时显示对应文本，可以直接用JavaScript实现：

<!-- 下拉框 -->
<select id="gender_select" name="select_value">
  <option value="male">Male</option>
  <option value="female">Female</option>
  <option value="transgender">Transgender</option>
</select>
<!-- 文本显示容器 -->
<p id="gender_tip"></p>

<script>
const selectEl = document.getElementById('gender_select');
const tipEl = document.getElementById('gender_tip');
// 更新提示文本
function updateTip() {
    const val = selectEl.value;
    if(val === 'male') {
        tipEl.textContent = 'Hi I am Male';
    } else if(val === 'female') {
        tipEl.textContent = 'Hi I am female';
    } else if(val === 'transgender') {
        tipEl.textContent = 'Hi I am transgender';
    }
}
// 初始化显示默认选项文本
updateTip();
// 监听选择变化
selectEl.addEventListener('change', updateTip);
</script>

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