Javascript - 添加更多按钮功能和 2 个动态选择标签

Question

我有 2 个选择框(类别和部分)。当我选择一个类时，第二个选择框通过 AJAX 从另一个文件获取相关部分的动态列表。它运作良好。我添加了(添加更多类 Btn)和 JS 函数，它创建了相同的 2 个选择框(类和部分)。选择类(class)后，由于 id 相同，我无法获取相关部分。

这是我的PHP代码:

        <?php
            include('dbConfig.php');
            $query = $db->query("SELECT * FROM classes ");
            $rowCount = $query->num_rows;
        ?>

        <div class="input_fields_wrap">
            <button class="add_field_button btn btn-sm btn-primary">Add More Classes</button><br><br>
            <div class="row">
                <div class="col-md-6">
                    <label>Class</label>
                    <select name="class[]" id="class" class="form-control" style="width:150px;" required >
                        <option value="">Select Class</option>
                        <?php
                        if($rowCount > 0){
                            while($row = $query->fetch_assoc()){ 
                                echo '<option value="'.$row['id'].'">'.$row['class'].'</option>';
                            }
                        }else{
                            echo '<option value="">No Class Available</option>';
                        }
                        ?>
                    </select><br>
                </div>

                <div class="col-md-6">
                    <label>Section</label>
                    <select id="section" name="section[]" class="form-control" style="width:150px;" required >
                    <option value="">Select Class first</option>
                    </select>
                </div>
            </div><br>
        </div>

这是我的JS代码:

<script>
  $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 0; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append(
            '<div class="row"><div class="col-md-6"><label>Class</label><select name="class[]" id="class" class="form-control" style="width:150px;" required ><option value="">Select Class</option><?php $query = $db->query("SELECT * FROM classes "); $rowCount = $query->num_rows;
                    if($rowCount > 0){
                        while($row = $query->fetch_assoc()){ 
                            echo '<option value="'.$row['id'].'">'.$row['class'].'</option>';
                        }
                    }else{
                        echo '<option value="">No Class Available</option>';
                    }
                    ?>
                </select></div><div class="col-md-6"><label>Section</label><select id="section" name="section[]" class="form-control" style="width:150px;" required ><option value="">Select Class first</option></select></div><a href="#" class="remove_field">Remove</a></div><br>'); //add box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $('#class').on('change',function(){
            var Class = $(this).val();
            if(Class){
                $.ajax({
                    type:'POST',
                    url:'get_sections.php',
                    data:'id='+Class,
                    success:function(html){
                        $('#section').html(html);
                    }
                }); 
            }else{
                $('#section').html('<option value="">Select Class first</option>');
            }
        });
    });
</script>

这是我的get_sections.php代码:

include('dbConfig.php');

if (isset($_POST["id"]) && !empty($_POST["id"])){
  //Get all Section Data
  $query = $db->query("SELECT * FROM sections WHERE class_id = ".$_POST['id']." ORDER BY section ASC");

  //Count total number of rows
  $rowCount = $query->num_rows;

  //Display Section list
  if($rowCount > 0){
    echo '<option value="">Select Section</option>';
    while($row = $query->fetch_assoc()){ 
      echo '<option value="'.$row['id'].'">'.$row['section'].'</option>';
    }
  }else{
    echo '<option value="">No Section Available</option>';
  }
}

请帮助我获取 JS 生成的选定类部分。

Answer 1

1. 此处多次使用“#class”。不要使用多个相同的“ID”
   时间。

2. 如果您通过 jquery 操作添加/追加 html，则相同的 jquery 函数不适用于新添加的 html。但简单的改变就可以解决问题。

   <script type="text/javascript">
   $(document).ready(function(){
       $(document).on('change','#class',function(){
           var Class = $(this).val();
           if(Class){
               $.ajax({
                   type:'POST',
                   url:'get_sections.php',
                   data:'id='+Class,
                   success:function(html){
                       $('#section').html(html);
                   }
               }); 
           }else{
               $('#section').html('<option value="">Select Class first</option>');
           }
       });
   });