Question 69534 in Ajax Question posted in
You can find the official documentation here.

SELECT Parent category from drop down, it will show child category in another drop down but repeating same child category – Jquery ajax

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.
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>;
        ';
    }

    // (...)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search