Cascading dropdown select fields - php

Question

I've updated my php code. I've managed to get all the parent taxonomies and their children in different select boxes. I'd like some help with the following: When I change the parent i'd like the second select to show his children only.
function categories_header_form()
{
?>
<div id="header-form">
<h3 class="form-title">
<?php echo 'Αναζήτηση προϊόντων ανά περιοχή' ?>
</h3>
<form id="search-form" action="#" method="post" >
<div class="form-container">
<?php nomoi(); ?>
<?php towns(); ?>
<?php products_selection(); ?>
<button type="submit" class="button" id="search-form-button">Εύρεση</button>
</div>
</form>
</div>
<?php
}
function products_selection()
{
$args = array(
'post_type' => 'seller',
'taxonomy' => 'category',
'hide_empty' => 0,
'exclude' => 1,1078,1079
);
$products = get_categories( $args );
if ( $products ) {
echo '<select id="products-select">';
echo '<option selected="" disabled="" value="0"><span>Προϊόντα</span></option>';
foreach ($products as $product) {
echo '<option class="product-name" id="'. $product->term_id .'">'. $product->name .'</option>';
}
echo '</select>';
}
}
function nomoi()
{
$args = array(
'post_type' => 'seller',
'taxonomy' => 'nomos',
'hide_empty'=> 0,
'parent' => 0
);
$categories = get_categories( $args );
if ( $categories ) {
// print_r($categories);
echo '<select id="nomoi-select">';
echo '<option selected="" disabled="" value="0"><span>Νομοί</span></option>';
foreach ($categories as $category) {
$id = $category->term_id;
$name = $category->name;
$taxonomy = $category->taxonomy;
echo '<option class="nomos" id="'. $id .'">'. $name .'</option>';
}
echo '</select>';
}
}
function towns()
{
$args = array(
'taxonomy' => 'nomos',
'hide_empty' => 0,
'hierarchical' => true,
'depth' => 1,
);
$cats = get_categories( $args );
echo '<select id="town-select">';
echo '<option selected="" disabled="" value="0"><span>Πόλεις</span></option>';
foreach ($cats as $cat) {
$cat_name = $cat->name;
$id = $cat->cat_ID;
echo '<option class="town" id="'. $id .'">'. $cat_name .'</option>';
}
echo '</select>';
}

Answer 1

Here is the most basic example i can give you..
You can improve this...
$("#nothingToSee").change(function() {
$("#sub1").css('display', 'none');
$("#sub2").css('display', 'none');
$("#sub3").css('display', 'none');
y = $(this).val();
$("#" + y).css('display', 'block');
});
#sub1 {
display: block;
}
#sub2,
#sub3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="nothingToSee" id="nothingToSee">
<option value="sub1">1</option>
<option value="sub2">2</option>
<option value="sub3">3</option>
</select>
<select name="nothingToSee" id="sub1">
<option value="1">1-1</option>
<option value="2">1-2</option>
<option value="3">1-3</option>
</select>
<select name="nothingToSee" id="sub2">
<option value="1">2-1</option>
<option value="2">2-2</option>
<option value="3">2-3</option>
</select>
<select name="nothingToSee" id="sub3">
<option value="1">3-1</option>
<option value="2">3-2</option>
<option value="3">3-3</option>
</select>