Good night, I have try to create nested dropdown select use jQuery ajax, but the result doesn’t work. First I have create both MySQL table subdistricts and table villages
and here’s below DropdwonController
<?php
declare(strict_types=1);
namespace App\Controller;
use Cake\Datasource\ConnectionManager;
/**
* Dropdown Controller
*
*/
class DropdownController extends AppController
{
private $db;
public function initialize(): void
{
parent::initialize();
$this->db = ConnectionManager::get("default");
}
public function index()
{
$subdistricts = $this->db->execute("SELECT id, kelurahan from subdistricts")->fetchAll("assoc");
$this->set(compact('subdistricts'));
}
public function getVillages()
{
if ($this->request->is("ajax")) {
$subdistrict_id = $this->request->getQuery("subdistrict_id");
$villages = $this->db->execute("SELECT id, kampung from villages where subdistrict_id = " . $subdistrict_id)->fetchAll("assoc");
return $this->response
->withType('application/json')
->withStringBody(json_encode($villages));
exit();
}
}
}
and here’s below template \templates\Dropdown\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<?php
echo $this->Html->css("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css");
?>
</head>
<body>
<div class="container">
<h3>Daftar Area Wilayah Pengiriman BasGan</h3>
<div class="panel panel-primary">
<div class="panel-heading">Area Wilayah Pengiriman Basgan</div>
<div class="panel-body">
<div class="form-group">
<label for="lbl_kelurahan">Kelurahan:</label>
<select id="kelurahan" name="kelurahan" class="form-control">
<option value="" selected disabled>Pilih Kelurahan</option>
<?php foreach ($subdistricts as $key => $subdistrict) { ?>
<option value="<?= $subdistrict['id'] ?>"> <?= $subdistrict['kelurahan'] ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="lbl_kampung">Perumahan / kampung:</label>
<select name="kampung" id="kampung" class="form-control"></select>
</div>
</div>
</div>
</div>
<?php
echo $this->Html->script("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js");
?>
<script type="text/javascript">
//ketika dropdown select kelurahan diklik
$('#kelurahan').change(function() {
var kelurahanID = $(this).val();
if kelurahanID () {
$.ajax({
type: "GET",
url: "/get-villages",
data: {
subdistrict_id: kelurahanID
},
success: function(res) {
var data = JSON.parse(res);
if (res) {
$("#kampung").empty();
$("#kampung").append('<option>Pilih Perumahan atau Kampung</option>');
$.each(data, function(key, value) {
$("#kampung").append('<option value="' + value.id + '">' + value.kampung + '</option>');
});
} else {
$("#kampung").empty();
}
}
});
} else {
$("#kampung").empty();
}
});
</script>
</body>
</html>
and the result doesn’t working, here below
and when I see in debug kit, the variable nested dropdown was display
and when I see in console log, there’s error unexpected identifier: kelurahanID
but I have check code above \templates\Dropdown\index.php there isn’t missing identifier
there’s anyone to help me to fix this, thanx