提交表单后如何保持依赖下拉列表的值

时间:2018-07-08 09:21:24

标签: javascript php jquery html

html代码

<tr align="center">
                            <td align="center" class="td_border">
                                <span class="custom-dropdown">
                                    <select name="medium" id="medium">
                                      <option value="0" <?php 
    if(isset($_POST['medium'])){ if($_POST['medium'] == '0'){ ? 
    >selected="true" <?php } } ?> >Select</option>
                                      <option value="english" <?php                 
    if(isset($_POST['medium'])){ if($_POST['medium'] == 'english'){ ? 
    >selected="true" <?php } } ?> >English</option>
                                      <option value="semi-english" <?php 
    if(isset($_POST['medium'])){ if($_POST['medium'] == 'semi-english'){ ? 
    >selected="true" <?php } } ?> >Semi-English</option>
                                      <option value="marathi" <?php 
    if(isset($_POST['medium'])){ if($_POST['medium'] == 'marathi'){ ? 
    >selected="true" <?php } } ?> >Marathi</option>
                                    </select>
                                </span>
                            </td>       
                            <td align="center" class="td_border">
                                <span class="custom-dropdown">
                                    <select name="class" id="class">
                                        <option value="0">Select Medium 
    first</option>
                                    </select>
                                </span>
                            </td>
                            <td align="center" class="td_border">
                                <span class="custom-dropdown">
                                    <select  name="subject" id="subject">
                                        <option value="0">Select class 
    first</option>
                                    </select>
                                </span>
                            </td>
                            <td align="center" class="td_border">
                                <span class="custom-dropdown">
                                     <select name="chapter" id="chapter">
                                        <option value="0">Select subject 
     first</option>
                                     </select>
                                </span>
                            </td>


            </tr>

values.php

<?php
    include 'dbconnect.php';

    if(!empty($_POST["medium_id"]) && $_POST["sel"]=='1'){
        $query = $linkid->query("SELECT DISTINCT class FROM syllabus WHERE 
    medium = '".$_POST['medium_id']."' AND insti_id = '2' ORDER BY class 
    ASC");

        $rowCount = $query->num_rows;

        if($rowCount > 0){
            echo '<option value="0">Select class</option>';
            while($row = $query->fetch_assoc()){ 
                echo '<option 
    value="'.$row['class'].'">'.$row['class'].'</option>';
            }
        }else{
            echo '<option value="0">Class not available</option>';
        }
    }
    elseif(!empty($_POST["class_id"])&& $_POST["sel"]=='2'){
        $query = $linkid->query("SELECT DISTINCT sub_name,sub_id FROM 
    syllabus WHERE class = ".$_POST['class_id']." AND medium = 
    '".$_POST['medium_id']."' AND insti_id = '2' ORDER BY sub_name ASC");

        $rowCount = $query->num_rows;

        if($rowCount > 0){
            echo '<option value="0">Select subject</option>';
            while($row = $query->fetch_assoc()){ 
                echo '<option 
     value="'.$row['sub_id'].'">'.$row['sub_name'].'</option>';
            }
        }else{
            echo '<option value="0">Subject not available</option>';
        }
    }
    elseif(!empty($_POST["subject_id"])&& $_POST["sel"]=='3'){
        $query = $linkid->query("SELECT DISTINCT chapter_id,chapter_name FROM 
    syllabus WHERE sub_id = '".$_POST['subject_id']."' AND class = 
    ".$_POST['class_id']." AND medium = '".$_POST['medium_id']."' AND 
    insti_id = '2' ORDER BY sub_name ASC");

        $rowCount = $query->num_rows;

        if($rowCount > 0){
            echo '<option value="0">Select subject</option>';
            while($row = $query->fetch_assoc()){ 
                echo '<option 
     value="'.$row['chapter_id'].'">'.$row['chapter_name'].'</option>';
            }
        }else{
            echo '<option value="0">Chapter not available</option>';
        }
    }
    ?>

ajax

<script type="text/javascript">
    $(document).ready(function(){
        $('#medium').on('change',function(){
            var mediumID = $(this).val();
            var sel='1';
            if(mediumID){
                $.ajax({
                    type:'POST',
                    url:'editq1.php',
                    data:'medium_id='+mediumID +"&sel="+sel,
                    success:function(html){
                        $('#class').html(html);
                        $('#subjct').html('<option value="0">Select class 
      first</option>'); 
                        //$('#chapter').html('<option value="">Select subject 
      first</option>'); 
                        //$('#question').html('<option value="">Select 
       chapter first</option>');

                }
            }); 
        }else{
            $('#class').html('<option value="0">Select medium 
   first</option>');
            $('#subject').html('<option value="0">Select class 
    first</option>'); 
            //$('#chapter').html('<option value="">Select subject 
    first</option>'); 
            //$('#question').html('<option value="">Select chapter 
    first</option>'); 
        }
    });

    $('#class').on('change',function(){
        var classID = $(this).val();
        var mediumID = $('#medium').val();
        var sel='2';
        if(classID){
            $.ajax({
                type:'POST',
                url:'editq1.php',
                data:'class_id='+classID +"&medium_id="+mediumID+"&sel="+sel,
                success:function(html){
                    $('#subject').html(html);
                    $('#chapter').html('<option value="0">Select subject 
      first</option>'); 
                    $('#question').html('<option value="0">Select chapter 
         first</option>'); 
                }
            }); 
        }else{
            $('#subject').html('<option value="0">Select Class 
         first</option>'); 
            $('#chapter').html('<option value="0">Select subject 
      first</option>'); 
            $('#question').html('<option value="0">Select chapter 
       first</option>'); 
        }
    });



    $('#subject').on('change',function(){
            var subjectID = $(this).val();
            var classID = $('#class').val();
            var mediumID = $('#medium').val();
            var sel='3';
            if(subjectID){
                $.ajax({
                    type:'POST',
                    url:'editq1.php',


   data:'subject_id= '+subjectID+"&class_id= "+classID+"&medium_id = 
   "+mediumID +"&sel= "+sel,
                    success:function(html){
                        $('#chapter').html(html);
                        $('#question').html('<option value="0">Select chapter 
  first</option>');
                    }
                }); 
            }else{
                $('#chapter').html('<option value="0">Select subject 
    first</option>'); 
                $('#question').html('<option value="0">Select chapter 
    first</option>'); 
            }
        });
    });

</script>

这些是我的4个依赖下拉列表 我想保留选定的值,即使在提交表单之后也是如此。

0 个答案:

没有答案