Home > Back-end >  SELECT Parent category from drop down, it will show child category in another drop down but repeatin
SELECT Parent category from drop down, it will show child category in another drop down but repeatin

Time:07-03

I'm facing an issue that I have created 2 tables one is parent_category and another is child_category. I fetch the parent categories in select option drop down. My aim is to fetch the child category from child table with parent id that is same in both table. I have tried many time but when I select parent category it will show me the same name categories many time in child select option drop down.

Here is my code.

index.php

<div>
        <select id="parent_category">
            <?php 
                $select = "select * from categories";
                $run = mysqli_query($con, $select);
                while($row = mysqli_fetch_array($run)){
                    echo "<option value='".$row['id']."'>".$row['name']."</option>";
                }
            ?>
        </select>

        <br><br>

        <select id="child_category">

        </select>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
    $(document).ready(function() {
        $('#parent_category').on('change', function() {
            let id = $(this).find(':selected').data('id');
            alert(id);
            $.ajax({
                url: 'data.php',
                method: 'GET',
                data: {
                    id: id,
                },
                success: function(data) {
                    $("#child_category").html(data);
                }
            });
        });
    });
    </script>

data.php

    $con = mysqli_connect("localhost", "root", "", "nilam-ghar");

    if(isset($_GET["id"])){
        $output = "";
        $id = $_GET['id'];
        $get = "SELECT * FROM child_category WHERE parent_cat_id='$id'";
        $run = mysqli_query($con, $get);
        while($row = mysqli_fetch_array($run)){
            echo $output .= '
                <option>'.$row["name"].'</option>;
            ';
        }

        echo $output;
    }

database tables

parent_category:
id(int)     date(date)    name(text)

child_category:
id()int     date(date)    parent_cat_id(int)    name(text)

**Note:** data exits in both table. in child category, parent id also exist.

CodePudding user response:

just checked your code found issue here let id = $(this).find(':selected').**data('id');** data('id') this will use when you assign <option data-id="1">OptionA</option> like this in your case your case you have used value attribute of option so

let id = $(this).find(':selected').val();

you will get value like this.

Also you can checkout below snippet, having more clear vision.

$(document).ready(function() {
  $('#parent_category').on('change', function() {
    let id = $(this).find(':selected').val();
    let option = $(this).find(':selected').text();

    console.log('ID => ' id ' Option => ' option);
  }) 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="parent_category">
  <option value="">Select</option>
  <option value="1">OptionA</option>
  <option value="2">OptionB</option>
  <option value="3">OptionC</option>
</select>

CodePudding user response:

Two things seems to be wrong in your code.

First, in your JavaScript you're getting the data-id attribute to make the query, but your <option>s don't have this attribute. So, try changing

let id = $(this).find(':selected').data('id');

for

let id = $(this).find(':selected').val();

Also, in your data.php, it seems that you're echoing the output twice, so try the following:

    // (...)

    while($row = mysqli_fetch_array($run)){
        // removed 'echo' in the line below
        $output .= '
            <option>'.$row["name"].'</option>;
        ';
    }

    // (...)
  • Related