从下拉菜单中选择父类别，它将在另一个下拉菜单中显示子类别，但重复相同的子类别

Question

我面临的问题是，我已经创建了2个表一个是parent_category和另一个是child_category。我在选择选项下拉中获取父类别。我的目标是从两个表中具有相同父id的子表中获取子类别。我已经尝试过很多次了，但是当我选择父类别时，它会在子选择选项下拉菜单中多次显示相同的名称类别。

这是我的代码。

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

数据库表

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>时使用在你的情况下你已经使用了选项的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>s没有这个属性。所以，试着改变

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

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

同样，在data.php中，似乎您回显了两次输出，所以尝试以下操作:

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