How to append and edit Select Tag with javascript?
Question
I have this kind of table
menu_id menu_name parent_id
1 Rapat 2018 0
2 Rapat RT 1
3 Rapat 2019 0
4 Rapat RW 1
5 Rapat RT 02 2
6 17 Agustus 5
I want to have select form based on parent.
If first select box choose "Rapat 2018" then the second select box appear with the option of child of Rapat 2018. Like this picture,
But the problem is, when i change the select other option in first select box, the option in second select box doesn't change but new select box appear.
How to change the second select box when the first select box changed? And if I select option from second select box, the third select box appear.
This is what i have done,
menu_drop_down.php
<?php
include 'conf.php';
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$sql = "SELECT MainMenu.menu_id, MainMenu.menu_name AS Menu, MainMenu.parent_id AS ParentId, COUNT(ChildMenu.menu_id) as Child, MainMenu.link
FROM menu AS MainMenu
LEFT JOIN menu AS ChildMenu ON ChildMenu.parent_id = MainMenu.menu_id
WHERE MainMenu.parent_id=0
GROUP BY MainMenu.menu_id, MainMenu.menu_name
ORDER BY MainMenu.menu_name DESC ";
$q = $pdo->query($sql);
$q->setFetchMode(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
die("Could not connect to the database $dbname :" . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>MultiDropdown</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<select name="category" class="form-control category" id="1">
<option value="">Select</option>
<?php
while ($r = $q->fetch()){
echo '<option value="'.$r['menu_id'].'">'.$r['Menu'].'</option>';
}
// foreach($data as $d){
// echo '<option value="'.$d['id'].'">'.$d['post_title'].'</option>';
// }
?>
</select>
</div>
</div>
<div id="dropdown_container"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('change','.category',function(){
var id = $(this).val();
var Sid = $(this).attr('id');
var tes = ++Sid;
console.log(tes);
$.ajax({
url:'getmenu.php',
type:'post',
data:{'id':id, 'tes' : tes},
success:function(data){
//alert(data);
$('#dropdown_container').append(data);
}
})
});
});
</script>
</body>
</html>
getmenu.php
<?php
include 'conf.php';
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
} catch (PDOException $e) {
die("Could not connect to the database $dbname :" . $e->getMessage());
}
if(isset($_POST['id'])){
$id= $_POST['id'];
$tes= $_POST['tes'];
$sql = "SELECT MainMenu.menu_id, MainMenu.menu_name AS Menu, MainMenu.parent_id AS ParentId, COUNT(ChildMenu.menu_id) as Child, MainMenu.link
FROM menu AS MainMenu
LEFT JOIN menu AS ChildMenu ON ChildMenu.parent_id = MainMenu.menu_id
WHERE MainMenu.parent_id=".$id."
GROUP BY MainMenu.menu_id, MainMenu.menu_name
ORDER BY MainMenu.menu_name DESC";
$q = $pdo->query($sql);
$q->setFetchMode(PDO::FETCH_ASSOC);
if(!empty($q)){
echo '<div class="row">
<div class="col-md-4">
<select name="category" class="form-control category" id="'.$tes.'">
<option value="">Select</option>';
while ($r = $q->fetch()){
echo '<option value="'.$r['menu_id'].'">'.$r['Menu'].'</option>';
}
echo '</select>
</div>
</div>';
}
}
?>
Any help would be appreciated !
0 answers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.