要了解您的代码为什么不起作用,您必须了解 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 和框架来实现了,但我不认为现在就写这些。
希望我对你有所帮助。