使用动态值添加更多下拉列表

Question

我有三个下拉列表（两个下拉动态值和一个空下拉列表）和一个按钮。当我单击按钮时，相同的四件事（两个带有动态值的下拉列表，一个空下拉列表和一个按钮）将附加到我的代码中。

现在我想在更改第一个下拉列表时使用动态值填充第三个下拉列表。

这是我的代码：

<div class="col-md-12" >
  <div class="col-md-3" style="padding-right:0px;">
    <div class="form-group">
      <label class="control-label">  <p>Class</p></label>
      <select   class="form-control select2" name="class_select[]" data-target="#">
        <?php
        foreach($conn->query('SELECT * FROM school_class') as $row) 
        {
          echo'<option value="'.$row['id'].'">'.$row['name'].'</option>'; 
        }?>
      </select>
    </div>
  </div>
  <div class="col-md-3" style="padding-right:0px;"> 
    <div class="form-group">
      <label class="control-label">  <p>Section </p></label>
      <select   class="form-control select2" name="section_select[]" data-target="#">
        <?php
        foreach($conn->query('SELECT * FROM school_section') as $row) 
        {
          echo'<option value="'.$row['id'].'">'.$row['name'].'</option>'; 
        }?>
      </select>
    </div>
  </div>
  <div class="col-md-3" style="padding-right:0px;">
    <div class="form-group">
      <label class="control-label">  <p>Subject</p></label>
      <select   class="form-control select2" name="subject_select[]" data-target="#">
        <option>Please Select</option>
      </select>
    </div>
  </div>
  <div class="col-md-2" style="padding-top:45px;">
    <span><a href="javascript:void(0);" class="add btn green" >Add More</a></span>
  </div>

</div>
<div class="contents"></div>

Jquery的：

<script>
  $(document).ready(function() {
      $(".add").click(function() {
          $('<div class="col-md-12 "><div class="col-md-3" style="padding-right:0px;"><div class="form-group"><select   class="form-control select2" name="class_select[]" data-target="#"><?php foreach($conn->query('SELECT * FROM school_class') as $row){ echo'<option value="'.$row['id'].'">'.$row['name'].'</option>'; }?></select></div></div> <div class="col-md-3" style="padding-right:0px;"><div class="form-group"><select   class="form-control select2" name="section_select[]" data-target="#"><?php
          foreach($conn->query('SELECT * FROM school_section') as $row) {
            echo'<option value="'.$row['id'].'">'.$row['name'].'</option>';}?></select></div></div> <div class="col-md-3" style="padding-right:0px;"><div class="form-group"><input class="form-control" name="m" ></div></div><span class="rem" ><a class="btn red" style="width:7.3%;margin-left:15px;" href="javascript:void(0);" >Remove</span></div>').appendTo(".contents");
      });
  });
</script>

<script>
$('.contents').on('click', '.rem', function() {
  $(this).parent("div").remove();
});
</script>