PHP html 选项值的模板化 if 语句

Question

假设您有以下 html select 语句：

<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>

并且通过 PHP 模板我想创建一个 If 语句，如果 select 语句“filter0”中的选项“外部”将显示另外两个 select 语句被选中。

到目前为止，我创建了以下代码段：

<?php if ($_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; ?>

现在另外两个select语句默认不会显示，这是对的，但如果选择“外部”选项，它们也不会显示。我在这里做错了什么？

希望有人能帮我解决这个问题！

Answer 1

要了解为什么您的代码无法正常工作，您必须了解 php 在这里的作用。

PHP 服务器收到页面请求。然后它“创建”页面并将其发送回首先请求它的客户端。

然后客户端接收到html页面。一旦它接收到 html 页面，它就可以用它做任何它想做的事。如果客户端 select 在您的 select 盒子上发出声音，您的 php 服务器永远不会知道。因此它不能改变 html 之后。

这就是为什么你不能按照你想要的方式做这样的事情。

但是您可能知道很多网站都在做这些事情，实际上有多种方法可以实现。

这是香草的一种方式javascript。

Javascript 就是您要找的。

Javascript 允许检查用户使用 html 做什么，它可以在使用时更改 html。

您的代码可能如下所示。

<style>
/* IF AN ELEMENT HAS A class="hidden" property then it will not be visible  */
.hidden { 
    display: none;
}
</style>
 
<form>
    <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 hidden" id="second-part"> <!-- AS YOU CAN SEE IT IS OF CLASS HIDDEN: SO THIS PART IS HIDDEN -->
        <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>  
</form>

<script>

    document.addEventListener('DOMContentLoaded', ()=>{ //waiting for the page to load

        let firstFilter = document.getElementById('filter0'); // selecting the first select box
        let secondPart  = document.getElementById('second-part'); //selecting the hidden part
        firstFilter.addEventListener('change', ()=>{ //when the first selection changes
            
            let selection = firstFilter.value; //get the selected value
            if(selection == 'external') { //if it is external
                secondPart.classList.remove('hidden'); //no more hidden
            }
            else { //else
                secondPart.classList.add('hidden'); //hide the second part (javascript automatically doesn't add the class if the class is already there)
            }

        })

    })

</script>

然后您可以在表单中添加一个“提交”按钮以将输入数据发送到新的 php 以便使用它（将其保存在数据库中或做任何您想做的事）。但是 注意： 在你的 php 你必须验证你的数据（因为黑客可以 select 一个不同于“外部”的选项，然后写一个 javascript 自己的代码使表单的第二部分可见）。

如果你只想在 php 中完成这一切，我建议你写多页。在第一页中，您有一个只有第一个 select 框的表单。如果 selection 是“外部”，它将把你带到第二页，否则它会把你带到最后一页。

表单的“操作”属性告诉 php 发送输入后将执行哪个文件。

/page1.php :

<form method="POST" action="/page2.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>
    <input type="submit">
</form>

/page2.php:

<?php 

if($_POST['filter0'] != 'external') {
    header('Location: /final.php ');
    exit();
}

?>

<form method="POST" action="/final.php" >
    <div class="distribution-interest hidden" id="second-part"> <!-- AS YOU CAN SEE IT IS OF CLASS HIDDEN: SO THIS PART IS HIDDEN -->
        <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>  
    <input type="submit">
</form>

终于有了更高级的方法，通过ajax和框架来实现，但我认为现在写这些是不可能的。

希望对你有所帮助。

PHP html 选项值的模板化 if 语句

PHP Templating if statement for html option value

php

html

templating