PHP模板判断select选external时显示额外下拉框不生效求助

问题根因 #

• PHP是服务端执行的脚本，只有当页面提交表单到服务端重新加载的时候，$_POST['filter0']才能拿到提交的值。你只是在浏览器里选了下拉框的选项，没有触发表单提交的话，服务端没有收到filter0的参数，自然不会渲染那两个额外的下拉框。
• 额外注意：如果是第一次加载页面没有POST请求的话，直接取$_POST['filter0']会报PHP未定义索引的警告，最好先判断isset($_POST['filter0'])再做值比较。

对应解决方法 #

场景1：需要服务端渲染（选完后提交表单才显示） #

你需要把整个select放在form表单里，加提交按钮，或者选完自动提交表单，修改后参考代码：

<form method="post" action="">
<div class="filter-align contact-select contact-select-distribution">
   <p class="distribution_p_ml">I want to contact</p>
   <select name="filter0" id="filter0" class="form-control contact_form-control" onchange="this.form.submit()">
       <option value="choose" <?php if(isset($_POST['filter0']) && $_POST['filter0'] == 'choose') echo 'selected';?>>Please Choose...</option>
       <option value="external" <?php if(isset($_POST['filter0']) && $_POST['filter0'] == 'external') echo 'selected';?>>External</option>
       <option value="management" <?php if(isset($_POST['filter0']) && $_POST['filter0'] == 'management') echo 'selected';?>>Management</option>
   </select>
</div>
<?php if (isset($_POST['filter0']) && $_POST['filter0'] === 'external') : ?>
   <div class="distribution-interest">
       <div class="filter-align contact-select contact-select-distribution">
           <p class="distribution_p_ml">I'm interested in</p>
           <select id="filter1" class="form-control contact_form-control">
               <option value="0">Please Choose...</option>
               <option value="1">Option 1</option>
               <option value="2">Option 2</option>
           </select>
       </div>

       <div class="filter-align contact-select contact-select-distribution">
           <select id="filter2" class="form-control contact_form-control">
                <option value="0">State (not chosen)</option>
                <option value="1">Option One</option>
                <option value="2">Option Two</option>
           </select>
       </div>
     </div>
<?php endif; ?>
</form>

这里加了onchange="this.form.submit()"，选完下拉框自动提交表单，页面刷新后就能显示额外的下拉，同时加了selected属性保持选中状态，加了isset判断避免PHP警告。

场景2：不需要刷新页面，选完立刻显示（前端JS实现） #

如果要更好的用户体验，不需要刷新页面，直接用JS监听select的change事件控制显示隐藏即可，不需要PHP判断，参考代码：

<div class="filter-align contact-select contact-select-distribution">
   <p class="distribution_p_ml">I want to contact</p>
   <select name="filter0" id="filter0" class="form-control contact_form-control">
       <option value="choose">Please Choose...</option>
       <option value="external">External</option>
       <option value="management">Management</option>
   </select>
</div>
<!--  默认隐藏  -->
<div class="distribution-interest" id="extraSelect" style="display:none;">
       <div class="filter-align contact-select contact-select-distribution">
           <p class="distribution_p_ml">I'm interested in</p>
           <select id="filter1" class="form-control contact_form-control">
               <option value="0">Please Choose...</option>
               <option value="1">Option 1</option>
               <option value="2">Option 2</option>
           </select>
       </div>

       <div class="filter-align contact-select contact-select-distribution">
           <select id="filter2" class="form-control contact_form-control">
                <option value="0">State (not chosen)</option>
                <option value="1">Option One</option>
                <option value="2">Option Two</option>
           </select>
       </div>
</div>
<script>
document.getElementById('filter0').addEventListener('change', function() {
    const extra = document.getElementById('extraSelect');
    if(this.value === 'external') {
        extra.style.display = 'block';
    } else {
        extra.style.display = 'none';
    }
});
</script>

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