根据第一个选择获取选项值

Question

我想根据第一个选项类型中的选择角色在第二个选项中获取用户。我有用户多表。我希望根据第一个选项值中的角色选择记录，然后根据选择从表中获取记录。我在这里只插入了 1 个表格代码。我希望当用户选择 npa 时，将从 npa 表中获取 reocrd。

/*Ajax.php*/
include('config.php');
if(!empty($_POST["role"])){
// Fetch state data based on the specific country
$query = "SELECT * FROM promotor";
$result = mysqli_query($conn , $query);
// Generate HTML of state options list
if(mysqli_num_rows($result) > 0){
echo '<option value="">Select User</option>';
while($row = mysqli_fetch_assoc($result)){
echo '<option value="'.$row['Promotor_ID'].'">'.$row['Promotor_Name'].'</option>';
}
}else{
echo '<option value="" class="form-control">User not available</option>';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
//alert(role);
$(document).ready(function(){
$('#role').on('change', function(){
var role = $(this).val();
if(role){
alert(console.log(role));
}
$.ajax({
type:'POST',
url:'ajax.php',
data:'role='+role,
success:function(html){
$('#user').html(html);
}
});
}
else{
$('#user').html('<option value="">User Not Available</option>');
}
});
</script>

<select id="role" name="role" class="form-control">
<option value="default">Select Role</option>
<option value="NPA">NPA</option>
<option value="BDA">BDA</option>
</select>


<select id="user" name="user" class="form-control">
<option value="">Select User</option>
</select>

Answer 1

<?php
<?php
/*getcustomer.php*/
include('config.php');
$sql = "select * from promotor";
$result = mysqli_query($conn, $sql);
?>
<select id="user">
<option value="">Select Country</option>
<?php
if(mysqli_num_rows($result)){
while($row = mysqli_fetch_assoc($result)){
echo '<option value="'.$row['Promotor_ID'].'">'.$row['Promotor_Name'].'</option>';
}
}else{
echo '<option value="">User Not Available</option>';
}
?>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xhttp.open("GET", "getcustomer.php?q="+str, true);
xhttp.send();
}
</script>

<select id="role" name="role" class="form-control" onchange="showCustomer(this.value)">
<option value="default">Select Role</option>
<option value="NPA">NPA</option>
<option value="BDA">BDA</option>
</select>
<div id="txtHint">User list will be here</div>