Как изменить несколько раскрывающихся значений onchange на ajax? - PullRequest
Новая
       9

Как изменить несколько раскрывающихся значений onchange на ajax?

0 голосов
/ 26 мая 2018

Я создал 4 раскрывающихся списка уровней книг, каждый из которых зависит от своего верхнего уровня (например, Уровень 2 книги показывает значения раскрывающегося списка, зависящие от категории Уровень 1 книги и т. Д.), И он также работает нормально, но теперьЯ хочу, чтобы только книжный уровень 4 независимый и должен показывать значения, если книжный уровень 1 не пустой.то есть, на уровне книги 1, в раскрывающемся списке Уровень книги 2 показано значение, зависящее от категории уровня Книги 1, а также в раскрывающихся значениях уровня книги 4, которые являются независимыми.Требуется помощь.

index.php 

<body>
<form method="post" name="AddBookDetails">
<table>
<tr>
<td>Book Level 1</td>
<td><select id="bl1" name="bookl1"><option value="" selected="selected">Book Level 1</option>
    <?php
    mysqli_set_charset($db,'utf8');
    $result=mysqli_query($db,"select * from booklevel1 ORDER BY booklevel1 ASC");
    if ($result>0){
    while ($row = mysqli_fetch_array($result)) {
    echo '<option value="'.$row['bl1_code'].'">'.$row['booklevel1'].'</option>';    
    }
    }
    else{
        echo '<option value="">Book Level 1 not present</option>';
    }
    ?></select></td>
</tr>

<tr>
<td>Book Level 2</td>
<td><select id="bl2" name="bookl2" ><option value="" >Select Level 2</option></select></td>
</tr>

<tr>
<td>Book Level 3</td>
<td><select id="bl3" name="bookl3" ><option value="" >Select Level 3</option></select></td>
</tr>

<tr>
<td>Book Level 4</td>
<td><select id="bl4" name="bookl4" ><option value="" >Select Level 4</option></select></td>
</tr>
</table>
<input name="addbook" type="submit" value="Save">
</form>
</body>

ajaxData.php 

<body>

<?php
include 'dbConfig.php';
if(!empty($_POST["bl1_code"])){

    $query2=$_POST['bl1_code'];
    $query = $db->query("SELECT * FROM booklevel2 WHERE bl1_code LIKE '%$query2%' ORDER BY booklevel2 ASC");
    $rowCount = $query->num_rows;

    //Book Level 2 option list
    if($rowCount > 0){
        echo '<option value="">Select Level 2</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['bl2_code'].'">'.$row['booklevel2'].'</option>';
        }
    }else{
        echo '<option value="">Level 2 empty</option>';
    }
}

elseif(!empty($_POST["bl2_code"])){

    $query3=$_POST["bl2_code"];
    $query = $db->query("SELECT * FROM booklevel3 WHERE bl2_code LIKE '%$query3%' ORDER BY booklevel3 ASC");
    $rowCount = $query->num_rows;

    //Book Level 3 option list
    if($rowCount > 0){
        echo '<option value="">Select Level 3</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['bl3_code'].'">'.$row['booklevel3'].'</option>';
        }
    }else{
        echo '<option value="">Level 3 empty</option>';
    }
}

elseif(!empty($_POST["bl3_code"])){

    $query4=$_POST["bl3_code"];
    $query = $db->query("SELECT * FROM booklevel4 WHERE bl3_code LIKE '%$query4%' ORDER BY booklevel4 ASC");
    $rowCount = $query->num_rows;

    //Book Level 4 option list
    if($rowCount > 0){
        echo '<option value="">Select Level 4</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['bl4_code'].'">'.$row['booklevel4'].'</option>';
        }
    }else{
        echo '<option value="">Level 4 empty</option>';
    }
}
?>
</body>

ajax.js 

// JavaScript Document
$(document).ready(function() {
            $('#bl1').on('change',function(){
        var blevel1 = $(this).val();
        if(blevel1){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'bl1_code='+blevel1,
                success:function(html){
                    $('#bl2').html(html);
                    $('#bl3').html('<option value="">Select Level 2 First</option>');
                    $('#bl4').html('<option value="">Select Level 3 First</option>');
                }
            });
        }else{
            $('#bl2').html('<option value="">Select Level 1 First</option>');
            $('#bl3').html('<option value="">Select Level 2 First</option>');
            $('#bl4').html('<option value="">Select Level 3 First</option>');

        }
    });


    $('#bl2').on('change',function(){
        var blevel2 = $(this).val();
        if(blevel2){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'bl2_code='+blevel2,
                success:function(html){
                    $('#bl3').html(html);
                }
            }); 
        }else{
            $('#bl3').html('<option value="">Select Level 2 First</option>');
            $('#bl4').html('<option value="">Select Level 3 First</option>'); 
        }
    });


    $('#bl3').on('change',function(){
        var blevel3 = $(this).val();
        if(blevel3){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'bl3_code='+blevel3,
                success:function(html){
                    $('#bl4').html(html);
                }
            }); 
        }else{
            $('#bl4').html('<option value="">Select Level 3 First</option>'); 
        }
    });

});

1 Ответ

0 голосов
/ 26 мая 2018

создать функцию bl1, bl2, bl3 bl4.при изменении вызвать функцию.что-то вроде этого 

<select id="bl1" onchange="bl1()">

Непосредственно перед завершением функции bl1 вызовите bl4 (); 

    function bl1()
    {
                    $('#bl1').on('change',function(){
                var blevel1 = $(this).val();
                if(blevel1){
                    $.ajax({
                        type:'POST',
                        url:'ajaxData.php',
                        data:'bl1_code='+blevel1,
                        success:function(html){
                            $('#bl2').html(html);
                            $('#bl3').html('<option value="">Select Level 2 First</option>');
                            $('#bl4').html('<option value="">Select Level 3 First</option>');
                        }
                    });
                }else{
                    $('#bl2').html('<option value="">Select Level 1 First</option>');
                    $('#bl3').html('<option value="">Select Level 2 First</option>');
                    $('#bl4').html('<option value="">Select Level 3 First</option>');

                }

    //function name here and business logic here
 if(blah blah)
{
    bl4();       
} 
else{ //blah blah}
    }   

 }
...