.search-box {
display: flex;
gap: 20px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.field {
flex: 1;
min-width: 250px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 15px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table thead {
background: #007bff;
color: white;
}
table th,
table td {
padding: 12px;
border: 1px solid #ddd;
text-align: left;
vertical-align: top;
}
table tbody tr:nth-child(even) {
background: #f9f9f9;
}
.no-data {
margin-top: 20px;
color: red;
font-weight: bold;
}
Loading States…
Select State First
// CSV URL
const csvUrl =
“https://docs.google.com/spreadsheets/d/1RidWB3fwPpyt7Pk0bg19g8KZBkgSaUpTrzvCNnnbyYw/export?format=csv”;
// Elements
const stateSelect = document.getElementById(“stateSelect”);
const districtSelect = document.getElementById(“districtSelect”);
const result = document.getElementById(“result”);
// Store CSV Data
let csvData = [];
// Load CSV
Papa.parse(csvUrl, {
download: true,
header: true,
skipEmptyLines: true,
complete: function(results) {
csvData = results.data;
// Unique States
const states = [
…new Set(
csvData
.map(row => row.State)
.filter(Boolean)
)
].sort();
// Populate States
stateSelect.innerHTML =
‘Select State’;
states.forEach(state => {
const option = document.createElement(“option”);
option.value = state;
option.textContent = state;
stateSelect.appendChild(option);
});
}
});
// State Change
stateSelect.addEventListener(“change”, function() {
const selectedState = this.value;
result.innerHTML = “”;
// Reset District
districtSelect.innerHTML =
‘Select District’;
if (!selectedState) {
districtSelect.innerHTML =
‘Select State First’;
return;
}
// Filter Districts
const districts = csvData
.filter(row => row.State === selectedState)
.map(row => row[“District Name”])
.filter(Boolean);
// Unique Districts
const uniqueDistricts = [
…new Set(districts)
].sort();
// Add Districts
uniqueDistricts.forEach(district => {
const option = document.createElement(“option”);
option.value = district;
option.textContent = district;
districtSelect.appendChild(option);
});
});
// District Change
districtSelect.addEventListener(“change”, function() {
const selectedState = stateSelect.value;
const selectedDistrict = this.value;
result.innerHTML = “”;
if (!selectedState || !selectedDistrict) {
return;
}
// Filter Matching Rows
const matchedRows = csvData.filter(row =>
row.State === selectedState &&
row[“District Name”] === selectedDistrict
);
// No Data
if (matchedRows.length === 0) {
result.innerHTML =
‘
No hospitals found.
‘;
return;
}
// Create Table
let html = `
| Name of Hospital |
Mandal |
Specialities |
Contact No |
`;
matchedRows.forEach(row => {
html += `
| ${row[“Name of Hospital”] || “N/A”} |
${row.Mandal || “N/A”} |
${row.Specialities || “N/A”} |
${row[“Mitra Contact No”] || “N/A”} |
`;
});
html += `
`;
result.innerHTML = html;
});
[full_width]