显示的选项取决于先前的下拉列表选择

Question

我有多个下拉列表，我想根据上一个下拉列表中选择的选项显示选项。

    <select name="parent1">
       <option value="">--Select a Location--</option>';
       <?php       
          foreach($alllocations as $elementlocations)
          {                                        
             if($elementlocations["parent1"]=="no" and $elementlocations["parent2"]=="no")
             {
              echo'
              <option class="'.$elementlocations["system"].'" value="'.$elementlocations["generalID"].'">'.$elementlocations["name"].'</option>';
             }
          }
      ?>
</select>
<select name="parent2">
   <option value="">--Select a Location--</option>
   <?php       
     foreach($alllocations as $elementlocations)
     {
       if($elementlocations["parent1"]!="no" and $elementlocations["parent2"]=="no")
       {
         echo'
          <option class="'.$elementlocations["parent1"].'" value="'.$elementlocations["generalID"].'">'.$elementlocations["name"].'</option>';
       }
     }
   ?>
</select>
<select name="parent3">
   <option value="">--Select a Location--</option>
   <?php       
      foreach($alllocations as $elementlocations)
      {
         if($elementlocations["parent1"]!="no" and $elementlocations["parent2"]!="no")
         {
           echo'
            <option class="'.$elementlocations["parent3"].'" value="'.$elementlocations["generalID"].'">'.$elementlocations["name"].'</option>';
         }
      }
  ?>

这个想法是获取在第一个列表中选择的值，并仅显示第二个列表的选项，其中该类与第一个列表中选择的值匹配。我找到了一些J，但我无法让它们符合我的目标。

编辑：

好吧，我被告知jQuery很容易学习，所以我尝试了...想法我花了2个小时才学到足以解决我的问题。 JQuery看起来很难，但事实上它的学习速度非常快（它包含了一些新的下拉列表。）

问题解决

$(document).ready(function(){
                $('#selectsystem').on('change', function(){
                        if( $('#selectsystem').val() != '') {
                            $('#sublocations').show();
                            $('#parent1').show();
                          }
                          else
                          {
                            $('#sublocations').hide();
                            $('#parent1').hide();
                          }
                    });
                    $('#parent1').on('change', function(){
                        if( $('#parent1').val() != '') {
                            $('#parent2').show();
                          }
                          else
                          {
                            $('#parent2').hide();
                            $('#parent3').hide();
                          }
                    });
                    $('#parent2').on('change', function(){
                        if( $('#parent2').val() != '') {
                            $('#parent3').show();
                          }
                          else
                          {
                            $('#parent3').hide();
                          }
                    });
                    $('#selectsystem').on('change', function(){
                        $('#parent1 option').not('.'+ this.value).hide();
                        $('.emptyselection').show();
                        $('.'+ this.value).show();
                    });
                    $('#parent1').on('change', function(){
                        $('#parent2 option').not('.'+ this.value).hide();
                        $('.emptyselection').show();
                        $('.'+ this.value).show();
                    });
                    $('#parent2').on('change', function(){
                        $('#parent3 option').not('.'+ this.value).hide();
                        $('.emptyselection').show();
                        $('.'+ this.value).show();
                    });
                });