Spaces:

CVNSS
/

sapnhap3321

Running

App Files Files Community

CVNSS commited on Jul 4, 2025

Commit

04588f1

verified ·

1 Parent(s): c724619

Update index.html

Browse files

Files changed (1) hide show

index.html +50 -53

index.html CHANGED Viewed

@@ -2,9 +2,9 @@
 <html lang="vi">
 <head>
     <meta charset="UTF-8">
-    <title>Tra cứu Đơn vị Hành chính Sáp nhập 3321</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- Bootstrap 5 & Choices.js CDN -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
     <style>
@@ -22,26 +22,20 @@
 </head>
 <body>
 <div class="container py-5">
-    <h2 class="mb-4 text-primary">🔎 Tra cứu Đơn vị Hành chính Sáp nhập 3321</h2>
     <div class="card shadow p-4 mb-4">
         <form id="searchForm" autocomplete="off">
             <div class="row mb-3">
-                <div class="col-md-4 mb-2">
-                    <label for="province_new" class="form-label">Tỉnh/Thành phố mới</label>
-                    <select class="form-select" id="province_new">
-                        <option value="">-- Chọn/Tìm tỉnh/thành phố --</option>
-                    </select>
-                </div>
-                <div class="col-md-4 mb-2">
-                    <label for="district_old" class="form-label">Quận/Huyện cũ</label>
-                    <select class="form-select" id="district_old">
-                        <option value="">-- Chọn/Tìm quận/huyện (cũ) --</option>
                     </select>
                 </div>
-                <div class="col-md-4 mb-2">
-                    <label for="ward_new" class="form-label">Phường/Xã mới</label>
-                    <select class="form-select" id="ward_new">
-                        <option value="">-- Chọn/Tìm phường/xã mới --</option>
                     </select>
                 </div>
             </div>
@@ -56,67 +50,68 @@
 </div>
 <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
 <script>
-// ====== Đọc file JSON ======
 let allData = [];
-const dataUrl = 'data_3321.json'; // Đổi tên nếu file bạn khác!
-const provinceNewSel = document.getElementById("province_new");
-const districtOldSel = document.getElementById("district_old");
 const wardNewSel = document.getElementById("ward_new");
 const resultArea = document.getElementById("resultArea");
 const searchForm = document.getElementById("searchForm");
 const loading = document.getElementById("loading");
 const resetBtn = document.getElementById("resetBtn");
 // Choices.js
-let provinceChoices = new Choices(provinceNewSel, { searchEnabled: true, itemSelectText: '', shouldSort: false });
-let districtChoices = new Choices(districtOldSel, { searchEnabled: true, itemSelectText: '', shouldSort: false });
 let wardChoices = new Choices(wardNewSel, { searchEnabled: true, itemSelectText: '', shouldSort: false });
 async function loadData() {
     loading.style.display = "inline";
     let res = await fetch(dataUrl);
     allData = await res.json();
-    // Lấy danh sách tỉnh mới duy nhất
     let provinces = [...new Set(allData.map(e => e.province_new))].sort();
-    provinceChoices.setChoices([{ value: '', label: '-- Chọn/Tìm tỉnh/thành phố --', selected: true, disabled: true }, ...provinces.map(p => ({value: p, label: p}))], 'value', 'label', true);
     loading.style.display = "none";
 }
-// Tỉnh mới -> Lọc Quận/Huyện cũ
-provinceNewSel.addEventListener("change", function() {
-    districtChoices.clearStore();
-    wardChoices.clearStore();
-    districtChoices.setChoices([{ value: '', label: '-- Chọn/Tìm quận/huyện (cũ) --', selected: true, disabled: true }], 'value', 'label', true);
-    wardChoices.setChoices([{ value: '', label: '-- Chọn/Tìm phường/xã mới --', selected: true, disabled: true }], 'value', 'label', true);
-    if (!this.value) return;
-    let districts = allData.filter(e => e.province_new === this.value).map(e => e.district_old);
-    districts = [...new Set(districts)].sort();
-    districtChoices.setChoices([{ value: '', label: '-- Chọn/Tìm quận/huyện (cũ) --', selected: true, disabled: true }, ...districts.map(d => ({value: d, label: d}))], 'value', 'label', true);
 });
-// Quận/huyện cũ -> Lọc phường/xã mới
-districtOldSel.addEventListener("change", function() {
-    wardChoices.clearStore();
-    wardChoices.setChoices([{ value: '', label: '-- Chọn/Tìm phường/xã mới --', selected: true, disabled: true }], 'value', 'label', true);
-    if (!this.value || !provinceNewSel.value) return;
-    let wards = allData.filter(e => e.province_new === provinceNewSel.value && e.district_old === this.value).map(e => e.ward_new);
     wards = [...new Set(wards)].sort();
-    wardChoices.setChoices([{ value: '', label: '-- Chọn/Tìm phường/xã mới --', selected: true, disabled: true }, ...wards.map(w => ({value: w, label: w}))], 'value', 'label', true);
 });
-// Tra cứu
 searchForm.addEventListener("submit", function(e) {
     e.preventDefault();
     resultArea.innerHTML = "";
     loading.style.display = "inline";
-    // Lọc kết quả (có thể chọn 1 hoặc nhiều field)
     let rs = allData.filter(e =>
-        (!provinceNewSel.value || e.province_new === provinceNewSel.value) &&
-        (!districtOldSel.value || e.district_old === districtOldSel.value) &&
-        (!wardNewSel.value || e.ward_new === wardNewSel.value)
     );
     if (rs.length === 0) showError("Không tìm thấy dữ liệu.");
     else renderResult(rs);
@@ -124,13 +119,11 @@ searchForm.addEventListener("submit", function(e) {
 });
 resetBtn.addEventListener("click", function() {
     provinceChoices.setChoiceByValue('');
-    districtChoices.clearStore(); districtChoices.setChoices([{ value: '', label: '-- Chọn/Tìm quận/huyện (cũ) --', selected: true, disabled: true }], 'value', 'label', true);
-    wardChoices.clearStore(); wardChoices.setChoices([{ value: '', label: '-- Chọn/Tìm phường/xã mới --', selected: true, disabled: true }], 'value', 'label', true);
     resultArea.innerHTML = "";
 });
-// Kết quả
 function renderResult(list) {
     resultArea.innerHTML = `
         <div class="card shadow p-3 mt-2">
@@ -138,14 +131,18 @@ function renderResult(list) {
             <div style="max-height:380px;overflow:auto;">
             <table class="table table-bordered table-hover align-middle small">
                 <thead class="table-light"><tr>
-                    <th>Tỉnh/TP mới</th><th>Quận/Huyện cũ</th><th>Phường/Xã mới</th>
                 </tr></thead>
                 <tbody>
                 ${list.map(d=>`
                     <tr>
                         <td>${d.province_new||''}</td>
                         <td>${d.district_old||''}</td>
-                        <td>${d.ward_new||''}</td>
                     </tr>
                 `).join('')}
                 </tbody>
@@ -158,7 +155,7 @@ function showError(msg) {
     resultArea.innerHTML = `<div class="alert alert-danger"><b>Lỗi:</b> ${msg}</div>`;
 }
-// Tải dữ liệu
 loadData();
 </script>
 </body>

 <html lang="vi">
 <head>
     <meta charset="UTF-8">
+    <title>Tra cứu Sáp nhập 3321 – Tìm ngược Xã/Phường mới → Quận/Huyện, Xã/Phường cũ</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Bootstrap & Choices.js -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
     <style>
 </head>
 <body>
 <div class="container py-5">
+    <h2 class="mb-4 text-primary">🔎 Tra cứu Sáp nhập 3321 (Xã/Phường mới → Địa danh cũ)</h2>
     <div class="card shadow p-4 mb-4">
         <form id="searchForm" autocomplete="off">
             <div class="row mb-3">
+                <div class="col-md-6 mb-2">
+                    <label for="ward_new" class="form-label">Chọn Xã/Phường mới</label>
+                    <select class="form-select" id="ward_new">
+                        <option value="">-- Chọn/Tìm xã/phường mới --</option>
                     </select>
                 </div>
+                <div class="col-md-6 mb-2">
+                    <label for="province_new" class="form-label">Chọn Tỉnh/Thành phố mới</label>
+                    <select class="form-select" id="province_new">
+                        <option value="">-- Chọn/Tìm tỉnh/thành phố mới --</option>
                     </select>
                 </div>
             </div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
 <script>
+// ==== Đọc file JSON 3321 ====
 let allData = [];
+const dataUrl = 'data_3321.json';
 const wardNewSel = document.getElementById("ward_new");
+const provinceNewSel = document.getElementById("province_new");
 const resultArea = document.getElementById("resultArea");
 const searchForm = document.getElementById("searchForm");
 const loading = document.getElementById("loading");
 const resetBtn = document.getElementById("resetBtn");
 // Choices.js
 let wardChoices = new Choices(wardNewSel, { searchEnabled: true, itemSelectText: '', shouldSort: false });
+let provinceChoices = new Choices(provinceNewSel, { searchEnabled: true, itemSelectText: '', shouldSort: false });
 async function loadData() {
     loading.style.display = "inline";
     let res = await fetch(dataUrl);
     allData = await res.json();
+    // Lấy tất cả xã/phường mới duy nhất
+    let wards = [...new Set(allData.map(e => e.ward_new))].sort();
+    wardChoices.setChoices([{ value: '', label: '-- Chọn/Tìm xã/phường mới --', selected: true, disabled: true }, ...wards.map(w => ({value: w, label: w}))], 'value', 'label', true);
+    // Lấy danh sách tỉnh/thành mới duy nhất
     let provinces = [...new Set(allData.map(e => e.province_new))].sort();
+    provinceChoices.setChoices([{ value: '', label: '-- Chọn/Tìm tỉnh/thành phố mới --', selected: true, disabled: true }, ...provinces.map(p => ({value: p, label: p}))], 'value', 'label', true);
     loading.style.display = "none";
 }
+// Khi chọn xã/phường mới → lọc ra những tỉnh mới có xã đó
+wardNewSel.addEventListener("change", function() {
+    if (!this.value) {
+        provinceChoices.setChoiceByValue('');
+        return;
+    }
+    let provinces = allData.filter(e => e.ward_new === this.value).map(e => e.province_new);
+    provinces = [...new Set(provinces)].sort();
+    provinceChoices.setChoices([{ value: '', label: '-- Chọn/Tìm tỉnh/thành phố mới --', selected: true, disabled: true }, ...provinces.map(p => ({value: p, label: p}))], 'value', 'label', true);
 });
+// Khi chọn tỉnh mới → lọc lại xã/phường mới thuộc tỉnh đó
+provinceNewSel.addEventListener("change", function() {
+    if (!this.value) {
+        wardChoices.setChoiceByValue('');
+        return;
+    }
+    let wards = allData.filter(e => e.province_new === this.value).map(e => e.ward_new);
     wards = [...new Set(wards)].sort();
+    wardChoices.setChoices([{ value: '', label: '-- Chọn/Tìm xã/phường mới --', selected: true, disabled: true }, ...wards.map(w => ({value: w, label: w}))], 'value', 'label', true);
 });
+// Tra cứu kết quả
 searchForm.addEventListener("submit", function(e) {
     e.preventDefault();
     resultArea.innerHTML = "";
     loading.style.display = "inline";
+    // Lọc theo xã mới và/hoặc tỉnh mới
     let rs = allData.filter(e =>
+        (!wardNewSel.value || e.ward_new === wardNewSel.value) &&
+        (!provinceNewSel.value || e.province_new === provinceNewSel.value)
     );
     if (rs.length === 0) showError("Không tìm thấy dữ liệu.");
     else renderResult(rs);
 });
 resetBtn.addEventListener("click", function() {
+    wardChoices.setChoiceByValue('');
     provinceChoices.setChoiceByValue('');
     resultArea.innerHTML = "";
 });
 function renderResult(list) {
     resultArea.innerHTML = `
         <div class="card shadow p-3 mt-2">
             <div style="max-height:380px;overflow:auto;">
             <table class="table table-bordered table-hover align-middle small">
                 <thead class="table-light"><tr>
+                    <th>Xã/Phường mới</th>
+                    <th>Tỉnh/TP mới</th>
+                    <th>Quận/Huyện cũ</th>
+                    <th>Xã/Phường cũ (nếu có)</th>
                 </tr></thead>
                 <tbody>
                 ${list.map(d=>`
                     <tr>
+                        <td>${d.ward_new||''}</td>
                         <td>${d.province_new||''}</td>
                         <td>${d.district_old||''}</td>
+                        <td>${d.ward_old||''}</td>
                     </tr>
                 `).join('')}
                 </tbody>
     resultArea.innerHTML = `<div class="alert alert-danger"><b>Lỗi:</b> ${msg}</div>`;
 }
+// Khởi động
 loadData();
 </script>
 </body>