级联下拉列表选择字段

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>

</div>