de baka kase may ginamit kang api e hehee. eto kasing ginawa dito is naka json file na.
maybe too large yung json file hard to decode ng browser. OR mali lang yung value na pinapasa mo sa dropdown mo
if you dont mind. penge ako code neto
You do not have permission to view the full content of this post.
Log in or register now.
try ko i debug.
ito yung js file po.
document.addEventListener("DOMContentLoaded", () => {
const regionsSelect = document.getElementById("regions");
const provincesSelect = document.getElementById("provinces");
const citiesSelect = document.getElementById("cities");
const barangaysSelect = document.getElementById("barangays");
const jsonFilePath = "philippine_provinces_cities_municipalities_and_barangays_2019v2.json";
fetch(jsonFilePath)
.then(response => {
if (!response.ok) {
throw new Error(
Failed to load JSON file: ${response.status} ${response.statusText});
}
return response.json();
})
.then(data => {
console.log("JSON data loaded successfully:", data);
populateRegions(data);
})
.catch(error => {
console.error("Error loading JSON:", error.message);
alert("Error loading JSON data. Please check the console for details.");
});
function populateRegions(data) {
const sortedRegions = Object.keys(data).sort((a, b) => a.localeCompare(b, undefined, {numeric: true}));
for (const regionKey of sortedRegions) {
const region = data[regionKey];
const regionName = region.region_name;
const option = document.createElement("option");
option.text = regionName;
option.value = regionKey;
regionsSelect.appendChild(option);
}
regionsSelect.addEventListener("change", () => {
const selectedRegionKey = regionsSelect.value;
clearAndPopulateDropdown(provincesSelect, Object.keys(data[selectedRegionKey].province_list), "Select a province");
clearDropdown(citiesSelect, "Select a city/municipality");
clearDropdown(barangaysSelect, "Select a barangay");
});
provincesSelect.addEventListener("change", () => {
const selectedRegionKey = regionsSelect.value;
const selectedProvinceName = provincesSelect.value;
clearAndPopulateDropdown(citiesSelect, Object.keys(data[selectedRegionKey].province_list[selectedProvinceName].municipality_list), "Select a city/municipality");
clearDropdown(barangaysSelect, "Select a barangay");
});
citiesSelect.addEventListener("change", () => {
const selectedRegionKey = regionsSelect.value;
const selectedProvinceName = provincesSelect.value;
const selectedCityName = citiesSelect.value;
const barangayList = data[selectedRegionKey].province_list[selectedProvinceName].municipality_list[selectedCityName].barangay_list;
console.log("Selected City:", selectedCityName);
console.log("Barangay List:", barangayList);
clearAndPopulateDropdown(barangaysSelect, barangayList, "Select a barangay", true);
});
}
function clearAndPopulateDropdown(selectElement, data, placeholderText, isArray = false) {
clearDropdown(selectElement, placeholderText);
if (isArray) {
data.forEach(item => {
const option = document.createElement("option");
option.text = item;
option.value = item;
selectElement.appendChild(option);
});
} else {
Object.keys(data).forEach(key => {
const option = document.createElement("option");
option.text = key;
option.value = key;
selectElement.appendChild(option);
});
}
}
function clearDropdown(selectElement, placeholderText) {
selectElement.innerHTML = "";
const placeholderOption = document.createElement("option");
placeholderOption.text = placeholderText;
placeholderOption.disabled = true;
placeholderOption.selected = true;
selectElement.appendChild(placeholderOption);
}
});
ito din yung sa drops.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
select {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
select:last-child {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<label for="regions">Select a region:</label>
<select id="regions">
<option value="" selected disabled>Select a region</option>
</select>
<label for="provinces">Select a province:</label>
<select id="provinces">
<option value="" selected disabled>Select a province</option>
</select>
<label for="cities">Select a city/municipality:</label>
<select id="cities">
<option value="" selected disabled>Select a city/municipality</option>
</select>
<label for="barangays">Select a barangay:</label>
<select id="barangays">
<option value="" selected disabled>Select a barangay</option>
</select>
</div>
<script src="js/phil.js"></script>
</body>
</html>
ito din yung link na pinag downloadan ng json file.
You do not have permission to view the full content of this post.
Log in or register now.