to understand why your code isn't working you have to understand what's the role of php here.
The PHP server recives a REQUEST of a page. Then it "creates" the page and sends it back to the client who requested it in the first place.
The client then recives the html page. Once it has recived the html page, it can do whatever it wants with it. If the client selects a voice on your select box, your php server will never know about it. Thus it cannot change the html afterward.
That's why you cannot do anything like this in the way you wanted.
But as you might know a lot of website do these kind of things, in fact there are multiple way of approaching it.
Here it is a way with vanilla javascript.
Javascript is what you are looking for.
Javascript allows to checks what the user is doing with the html and it can change the html while it is being used.
Your code could look like this.
<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>
Then you can add a "submit" button to the form to send to a new php the input data in order to use it (save it in the database or do whatever you want).
But pay attention: in your php you have to validate your data (since an hacker could select an option different from "external" and then write a javascript code of its own to make the second part of the form visible).
If you want to do this all only in php I suggest you to write multiple page.
In the first page you have a form with only the first select box.
If the selection is "external" it will send you to the second page, else it will send you to the final page.
The "action" property of a form tell which php file will be executed after sending the inputs.
/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>
Finally there are more advanced way of doing it through ajax and frameworks, but I don't think it is the case to write about them now.
Hope I've helped you.
