SELECT 下拉列表中的父類別，它將在另一個下拉列表中顯示子類別但重復相同的子類別

Question

我面臨一個問題，我創建了 2 個表，一個是 parent_category，另一個是 child_category。 我在 select 選項下拉菜單中獲取父類別。 我的目標是從兩個表中的父 id 相同的子表中獲取子類別。 我已經嘗試了很多次，但是當我 select 父類別時，它會在子 select 選項下拉菜單中多次顯示相同的名稱類別。

這是我的代碼。

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>

數據.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;
    }

數據庫表

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.

Answer 1

剛剛檢查了您的代碼，在這里發現了問題let id = $(this).find(':selected').**data('id');** data('id') 這將在您分配<option data-id="1">OptionA</option>時使用<option data-id="1">OptionA</option>在你的情況下像這樣你已經使用了選項的 value 屬性所以

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

你會得到這樣的價值。

您也可以在下面的代碼段結帳，有更清晰的視野。

 $(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>

Answer 2

您的代碼中似乎有兩件事是錯誤的。

首先，在您的 JavaScript 中，您獲得了data-id屬性來進行查詢，但您的<option>沒有此屬性。 所以，嘗試改變

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

為了

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

此外，在您的data.php中，您似乎在重復 output 兩次，因此請嘗試以下操作：

    // (...)

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

    // (...)