Contoh data di ambil dari
Sistem Data Dictionary Sektor Awam(SDDSA)
Parlimen
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "get",
url: "https://www.azali.net/API/Parlimen",
contentType: "application/json;charset=utf-8",
dataType: "json",
data: {},
success: function (result) {
$.each(result, function (i) {
$('#selPar').append($('<option></option>').val(result[i].KodPar).html(result[i].KodPar + ' - ' + result[i].NamaPar));
});
$('#selPar').change();
},
failure: function () {
alert("Error");
}
});
$('#selPar').change(function () {
var selectedParliment = $("#selPar option:selected").val();
$.ajax({
type: "get",
url: "https://www.azali.net/API/Parlimen/" + selectedParliment,
contentType: "application/json;charset=utf-8",
dataType: "json",
data: {},
success: function (result) {
$('#tblDUN').empty();
$('#tblDUN').append('<thead><tr><th>Kod</th><th>Dewan undangan negeri</th></tr></thead>');
$('#tblDUN').append('<tbody>');
for (var x = 0; x < result.DUN.length; x++) {
$('#tblDUN').append('<tr><td>' + result.DUN[x].KodDUN + '</td><td>' + result.DUN[x].NamaDUN + '</td></tr>');
}
$('#tblDUN').append('</tbody>');
},
failure: function () {
alert("Error");
}
});
});
});
</script>
<h2>DUN</h2>
<p>
Parlimen <select id="selPar"></select>
</p>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-8 col-md-6 col-lg-4">
<table id="tblDUN" class="table well"></table>
</div>
</div>
</div>
Back to Demo