I need help for this. I want to create a select option where it will show a second select option. With that second select option I will select options there that will display data in a id. The data will be came from the 1st select option and to the second select option. Thank you very much in advance. . . So far these are my codes that I created.
students.php
<div class="text-center" align="center">
<select id="ch_br_LdSubs" class="form-control" style="width: 200px; text-align: center !important;">
<option value="">-- select branch --</option>
<option value="MBC">MinSCAT Bongabong Campus</option>
<option value="MMC">MinSCAT Main Campus</option>
<option value="MCC">MinSCAT Calapan City Campus</option>
</select>
</div>
<div style="margin: 10px;"></div>
<div id="printArea">
<div class="scroll-x">
<div id="branchData"></div>
</div>
</div>
ajax.js $(document).ready(function(){
/* Load the Students for a Specifed Branch and Course */
$('#showStdsByCourse').change(function(){
var course = $(this).val();
var branch = $('#ch_br_LdSubs').val();
$.ajax({
url: 'actions.php',
type: 'POST',
data: {action: 'showStudents', branch: branch, course: course},
dataType: 'html',
success: function(result)
{
$('studentsData').html(result);
},
error: function()
{
alert('Failed to load students!');
}
});
});
/* Load the Branch Data for a Specified Branch */
$('#ch_br_LdSubs').change(function(){
var branch = $(this).val();
$.ajax({
url: 'actions.php',
type: 'POST',
data: {action: 'showBranchData', branch: branch},
dataType: 'html',
success: function(result)
{
$('#branchData').html(result);
},
error: function()
{
alert('Failed to load student data!');
}
});
});
/* Load the Courses for a Specified Branch */
$('#selectedBranch_loadCourse').change(function(){
var branch = $(this).val();
$.ajax({
url: 'actions.php',
type: 'POST',
data: {action: 'loadSubjectsPerBranch', branch: branch},
dataType: 'html',
success: function(result)
{
$('#loadCourseByBranch').html(result);
},
error: function()
{
alert('Failed to load courses!');
}
});
});
});
This are the codes I put on the class I've created
public function showBranchData($branch) {
try {
$stmt = $this->db->prepare("SELECT * FROM students WHERE branch = :branch");
$stmt->bindparam(':branch', $branch);
$stmt->execute();
if ($stmt->rowCount() != null) {
$branch_data = $stmt->fetch(PDO::FETCH_ASSOC);
?>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title"><?php print($branch_data['branch']) ?> Students</h4>
</div>
<div class="panel-body">
<select id="showStdsByCourse" class="form-control" style="width: 200px">
<?php
$courses = $this->db->prepare("SELECT * FROM courses WHERE branch = :branch");
$courses->bindparam(":branch", $branch);
$courses->execute();
if ($courses->rowCount() != null) {
echo '<option value="">-- select course --</option>';
while ($courseData = $courses->fetch(PDO::FETCH_ASSOC)) {
?>
<option value="<?php print($courseData['course_acronym']) ?>"><?php print($courseData['course_name']) ?></option>
<?php
}
} else {
?>
<option value="">-- no courses yet --</option>
<?php
}
?>
</select>
<span id="text"></span>
<div id="studentsData"></div>
</div>
</div>
<?php
} else {
?>
<div class="alert alert-danger">
No student data added yet!
</div>
<?php
}
} catch (PDOException $ex) {
echo $ex->getMessage();
return false;
}
}
public function showStudents($branch, $course) {
try {
$stmt = $this->db->prepare("SELECT * FROM students WHERE branch = :branch AND course = :course");
$stmt->bindparam(":branch", $branch);
$stmt->bindparam(":course", $course);
$stmt->execute();
if ($stmt->rowCount() != null) {
echo 'Student Data';
} else {
?>
<div class="alert alert-warning">No student data added yet!</div>
<?php
}
} catch (PDOException $ex) {
echo $ex->getMessage();
return false;
}
}
