如何自动选择ajax下拉列表

时间:2018-03-23 14:10:47

标签: javascript php html ajax dropdown

我在php和ajax中有一个工作下拉列表,我得到学年的id将它传递给另一个是Curriculum.php的页面。我的问题是如何自动选择学年ID,如下面的截图。

enter image description here

我尝试过使用但不会下拉。您需要在年级下拉前选择学年

我有这段代码:

的index.php

 <div class="col-xl-6">
                <div class="card pd-20 pd-sm-30 form-layout form-layout-4">
                <h6 class="card-body-title mg-b-45">Add Subject</h6>
                <!-- <p class="mg-b-20 mg-sm-b-45">Add subject for curriculum</p> -->
                    <div class="row">
                    <label class="col-sm-4 form-control-label">School Year: <span class="tx-danger">*</span></label>
                    <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                        <select class="form-control select2" id="sy" data-placeholder="Select grade level" disabled>
                            <option label="Select grade level"></option>
                            <?php
                                $id = $_GET['id'];
                                include('../includes/db_conn.php');
                                $q = mysqli_query($conn,"SELECT * FROM tbl_curriculum JOIN tbl_school_year ON tbl_curriculum.sy_id = tbl_school_year.sy_id WHERE tbl_school_year.sy_id = {$id} GROUP BY tbl_school_year.sy_id");
                                while($row=mysqli_fetch_array($q)){
                                    echo '<option value="'.$row['sy_id'].'" selected>'.$row['sy_start'].' - '.$row['sy_end'].'</option>';
                                }
                            ?>
                        </select><!-- end select -->
                    </div>
                </div><!-- row -->
                <div class="row mg-t-20">
                    <label class="col-sm-4 form-control-label">Grade Level: <span class="tx-danger">*</span></label>
                    <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                        <select class="form-control select2" name="cur_id" id="grade_cur" data-placeholder="Select grade level">
                        <option label="Select grade level"></option>
                        </select>
                    </div>
                </div>

                <div class="row mg-t-20">
                    <label class="col-sm-4 form-control-label">Subject: <span class="tx-danger">*</span></label>
                    <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                        <select class="form-control select2" data-placeholder="Select subject" id="subject" name="subject_id[]" multiple>
                        </select>
                    </div>
                </div>

                <div class="row mg-t-20">
                    <label class="col-sm-4 form-control-label">Add More: <span class="tx-danger">*</span></label>
                    <div class="col-sm-6 mg-t-10 mg-sm-t-0">
                        <input class="form-control" placeholder="Add Subject" type="text">
                    </div>
                    <a href="#" class="btn btn-success btn-icon mg-r-5 mg-b-10"><div><i class="fa fa-plus"></i></div></a>
                </div>

                <div class="form-layout-footer mg-t-30">
                    <button class="btn btn-success mg-r-5" name="add_cur_subj" value="submit">Add Subject</button>
                    <?php
                        $id = $_GET['id'];
                        $sel = "SELECT * FROM tbl_school_year
                        WHERE tbl_school_year.sy_id = {$id} GROUP BY tbl_school_year.sy_id";
                        $result = mysqli_query($conn,$sel);
                        while($row = mysqli_fetch_assoc($result)){
                    ?>
                    <a href="reg-assign-section.php?id=<?php echo $row['sy_id']?>" class="btn btn-success">Next <i class="fa fa-arrow-circle-o"></i><i class="fa fa-arrow-circle-o-right"></i></a>
                    <?php }?>

                    <button class="btn btn-secondary">Cancel</button>
                </div><!-- form-layout-footer -->
            </div><!-- card -->
           </form>
          </div><!-- col-6 -->

ajaxdropdown.php

<script type="text/javascript">
    //dropdown for grade level    
    $(document).ready(function(){
        $('#sy').on('change',function(){
        var sy_ID = $(this).val();
        if(sy_ID){
            $.ajax({
                type:'POST',
                url:'./functions/dd_add_cur.php',
                data:'sy_id='+sy_ID,
                success:function(html){
                    $('#grade_cur').html(html);
                    $('#section').html('<option value="">Select grade_cur first</option>'); 
                }
                }); 
            }else{
                $('#grade_cur').html('<option value="">Select country first</option>');
                $('#section').html('<option value="">Select grade_cur first</option>'); 
            }
        });

        //dropdown for section
        $('#grade_cur').on('change',function(){
            var curID = $(this).val();
            if(curID){
                $.ajax({
                    type:'POST',
                    url:'functions/dd_add_cur.php',
                    data:'cur_id='+curID,
                    success:function(html){
                        $('#subject').html(html);
                    }

                }); 
            }else{
                $('#subject').html('<option value="">Select country first</option>');
            } 
        });

    });
</script>

dd_add_cur.php

<?php

//Include database configuration file
include('../../includes/db_conn.php');

if(isset($_POST["sy_id"]) && !empty($_POST["sy_id"])){

    //Get all section data
    $query = $conn->query("SELECT * FROM tbl_curriculum JOIN tbl_grade_level ON tbl_curriculum.grade_level_id = tbl_grade_level.grade_level_id WHERE tbl_curriculum.sy_id = ".$_POST['sy_id']."");

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

    //Display sections list
    if($rowCount > 0){
        echo '<option value="">Select section</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['cur_id'].'">'.$row['grade_level_name'].'</option>';
        }
    }else{
        echo '<option value="">Please, assigned section</option>';
    }
}

if(isset($_POST["cur_id"]) && !empty($_POST["cur_id"])){

    //Get all subject data
    $query = $conn->query("SELECT * FROM tbl_curriculum
        JOIN tbl_grade_level ON tbl_curriculum.grade_level_id=tbl_grade_level.grade_level_id
        JOIN tbl_section ON tbl_curriculum.grade_level_id=tbl_section.grade_level_id
        JOIN tbl_subject ON tbl_curriculum.grade_level_id=tbl_subject.grade_level_id
        WHERE tbl_curriculum.cur_id = ".$_POST['cur_id']." GROUP BY tbl_subject.subject_id");

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

    //Display subjects list
    if($rowCount > 0){
        echo '<option value="">Select subject</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['subject_id'].'" selected>'.$row['subject_name'].'</option>';
        }
    }else{
        echo '<option value="">Subject not offered</option>';
    }
}
?>

0 个答案:

没有答案