html选项值的PHP模板if语句

Posted 2023-02-22

【中文标题】html选项值的PHP模板if语句

【英文标题】：PHP Templating if statement for html option value

【发布时间】：2021-10-25 12:11:14

【问题描述】：

假设你有以下 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”中的选项“external”，则将显示另外两个 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语句，这是正确的，但是如果选择了“external”选项，它们也不会显示。我在这里做错了什么？

我希望有人可以帮助我！

【问题讨论】：

您知道，只有 选择 前端中的选项本身并没有任何作用，并且您必须先提交您的表单，然后再进行选择...对吗？

【参考方案1】：

要了解您的代码为什么不起作用，您必须了解 php 在这里的作用。

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

客户端然后接收 html 页面。一旦它接收到 html 页面，它就可以用它做任何它想做的事情。如果客户端在您的选择框中选择了一个声音，您的 php 服务器将永远不会知道它。因此它无法在之后更改 html。

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

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

这是一种使用 vanilla 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 中，您必须验证您的数据（因为黑客可以选择不同于“外部”的选项，然后编写自己的 javascript 代码来制作表单的第二部分可见）。

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

表单的“action”属性告诉在发送输入后将执行哪个 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 和框架来实现了，但我不认为现在就写这些。

希望我对你有所帮助。

【讨论】：

非常感谢您的详细解释，您真的帮助我理解了它是如何工作的！特别是 javascript 部分帮助了我很多，所以是的，这对我来说很好！ :)