My problem is when splitting a data. First select element is to choose a person, upon clicking it, it will display another data inside second element and then upon select the result will append it's corresponding data to the third select element. Problem I could not separate it and when I tried splitting it doesn't work.
Here is my code
function ToolsChange(element) {
let tools_controller = $(element).val();
if (tools_controller) {
$.ajax({
type: "post",
url: "form_ajax_for_request.php",
data: {
"tools_cont": tools_controller
},
success: function(response) {
var dataSplit = response;
var shouldSplit = dataSplit.split("@");
$('#sel_requested_dept').html('');
$('#sel_requested_dept').append(response);
$('#sel_requested_dept').selectpicker('refresh');
$('#sel_requested_section').html('');
$('#sel_requested_section').append(shouldSplit[2]);
$('#sel_requested_section').selectpicker('refresh');
}
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label> Tools Controller: </label>
<select class="form-control selectpicker" name="tools_controller" data-live-search="true" onchange="ToolsChange(this)" required>
<option value="" selected disabled> Select Tools Controller </option>
<?php
$query = "SELECT * FROM tools_dept_registration";
$con->next_result();
$result=mysqli_query($con,$query);
if(mysqli_num_rows($result)>0)
{
while($row=mysqli_fetch_assoc($result))
{
echo '<option value="'.$row['name_of_controller'].'">'. $row['name_of_controller']
.'</option>';
}
}
?>
</select>
</div>
<div class="form-group">
<label> Department </label>
<select name="request_dept" id="sel_requested_dept" class="form-control selectpicker" data-live-
search="true" required>
<option value="" selected disabled> Select Department </option>
</select>
</div>
<div class="form-group">
<label> Section/Model </label>
<select name="request_section_model" id="sel_requested_section" class="form-control selectpicker" data-live-search="true" required>
<option value="" selected disabled> Select Section/Model </option>
</select>
</div>
Whole code inside my ajax/php
<?php
include("../include/connect.php");
if(isset($_POST['tools_cont'])){
$ID = $_POST['tools_cont'];
$query = "SELECT * FROM tools_dept_registration
RIGHT JOIN tools_section_model_reg ON tools_section_model_reg.dept_id = tools_dept_registration.ID
WHERE name_of_controller = '$ID'";
$con->next_result();
$result=mysqli_query($con, $query);
if(mysqli_num_rows($result)>0)
{
while($row = mysqli_fetch_assoc($result))
{
echo "@" . '<option value="'.$row['dept_name'].'">'. $row['dept_name'] . " - " . $row['ass_leader'] . '</option>'
. "@" .'<option value="'.$row['section_model'].'">'. $row['section_model'] .'</option>';
}
}
}
?>
What I have tried:
What I did was I created a 3 `` elements. I manage and successfully got the data and tried splitting it