Geek Answers Handbook

Drop-down list not displaying data

I am showing 2 dropdowns. html page code

<head>
<script>
$(document).ready(function(){
    $('#cat').change(function(){
        var catid = $('#cat').val();
        if(catid != 0)
        {
            $.ajax({
                type:'post',
                url:'fetchsubcat.php',
                data:{id:catid},
                cache:false,
                success: function(returndata){
                    $('#subcat').html(returndata);
                }
            });
        }
    })
})
</script>
</head>
<body>
<fieldset>
    <label>Category</label>
    <select name="catname" id="cat">
        <option value="0">Please Select a category</option>
        <?php
            require 'connection.php';
                $sql = "SELECT * FROM category";
                $result = mysqli_query($con, $sql);

                if (mysqli_num_rows($result) > 0) {
                    while($row = mysqli_fetch_assoc($result)) 
                        {
                            $catname=$row["catname"];
                            $catid=$row["id"];
        ?>
        <option value="<? echo $catname.'-'.$catid;?>"><? echo $catname;?></option>
                        <?}
                }?>
    </select>
</fieldset> 

<fieldset>
    <label>Subcategory</label>
    <select name="subcatname" id="subcat">
        <option></option>
    </select>
</fieldset>
</body>

code on fetchsubcat.php page

<?php
    require 'connection.php';
        $sql = "SELECT * FROM subcategory where catid='".$_POST['id']."'";
        $result = mysqli_query($con, $sql);

        if (mysqli_num_rows($result) > 0) {
            while($row = mysqli_fetch_assoc($result)) 
                {
                    $subcatname=$row["subcatname"];
                    $subcatid=$row["id"];

?>

<option value="<? echo $subcatname.'-'.$subcatid;?>"><? echo $subcatname;?></option>

category table view

id catname

subcategory table view

id  catname  catid  subcatname

When I select a category, I want the second drop-down list to display only those subcategories that are under the selected category, but the problem is that nothing is displayed in the subcategories when choosing a category. can anyone help me

+4
source share
3 answers

- AJAX? - , , , , AJAX .

, () , _POST['id'] , , , , . , ?

0

.

<script>
$(document).ready(function(){
    $('#cat').change(function(){
        var catid = $('#cat').val();
        if(catid != 0)
        {
            $.ajax({
                type:'post',
                url:'fetchsubcat.php',
                data:{id:catid},
                cache:false,
                dataType: "json",
                success: function(returndata){
                  $.each(returndata, function(i, item) {
                  $('#subcat').append('<option value="'+returndata[i].subcatname+'-'+returndata[i].subcatid+'">'+returndata[i].subcatname+'</option>');
                   });​
                }
            });
        }
    })
})
</script>

fetchsubcat.php

<?php
    require 'connection.php';
        $sql = "SELECT * FROM subcategory where catid='".$_POST['id']."'";
        $result = mysqli_query($con, $sql);
        $rows = Array();
        while($row = mysqli_fetch_assoc($result)) {
                 $rows[] = $row;
         }
        print json_encode($rows);
 ?>
0

Change your fetchsubcat.php code to

<?php
    require 'connection.php';
    $catid =  $_REQUEST['id']; 

        $sql = "SELECT * FROM subcategory where catid='".$catid."'";
        $result = mysqli_query($con, $sql);

        if (mysqli_num_rows($result) > 0) 
            {
                while($row = mysqli_fetch_assoc($result)) 
                    {
                        $subcatname=$row["subcatname"];
                        $subcatid=$row["id"];
?>
<option value="<? echo $subcatname.'-'.$subcatid;?>"><? echo $subcatname;?></option>
                  <?}
            }
        else
            {?>
                <option value="">No sub category </option>
            <?}?>
0
source

More articles:


All Articles