Code HTML API tra cứu 34 tỉnh thành Việt Nam sau sáp nhập

Chia sẻ code HTML + JavaScript tích hợp API tra cứu danh sách 34 tỉnh/thành Việt Nam sau sáp nhập 2025. Hỗ trợ chọn tỉnh, xã/phường và hiển thị địa chỉ đầy đủ với giao diện CSS đẹp.

Để hỗ trợ lập trình viên và webmaster cập nhật kịp thời, trong bài viết này mình chia sẻ code HTML + JavaScript kèm API dữ liệu 34 tỉnh/thành mới nhất. Với đoạn code này, bạn có thể dễ dàng tích hợp dropdown chọn tỉnh, xã/phường và hiển thị địa chỉ đầy đủ với giao diện CSS gọn gàng, hiện đại.

Demo

Chọn Địa Chỉ

Chọn Tỉnh/Thành: Chọn Xã/Phường/Thị trấn:

Code

<style>
.address-box{font-family:Arial,sans-serif;background:#f4f6f9;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0}
.address-box .address-card{background:#fff;padding:25px 30px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);width:400px}
.address-box h2{text-align:center;margin-bottom:20px;color:#333}
.address-box label{font-weight:bold;display:block;margin:15px 0 5px;color:#444}
.address-box select{width:100%;padding:10px;border-radius:8px;border:1px solid #ccc;outline:none;transition:all 0.2s ease}
.address-box select:focus{border-color:#007bff;box-shadow:0 0 5px rgba(0,123,255,0.5)}
.address-box .address-result{display:none;margin-top:20px;padding:15px;background:#f0f8ff;border-left:4px solid #007bff;border-radius:6px;font-size:14px;color:#333}
</style>
<div class="address-box">
  <div class="address-card">
    <h2>Chọn Địa Chỉ</h2>
    <label for="province">Chọn Tỉnh/Thành:</label>
    <select id="province">
      <option value="">-- Chọn tỉnh/thành --</option>
    </select>
    <label for="ward">Chọn Xã/Phường/Thị trấn:</label>
    <select id="ward">
      <option value="">-- Chọn xã/phường --</option>
    </select>
    <div id="result" class="address-result"></div>
  </div>
</div>
<script>
  async function loadData() {
    const res = await fetch("https://raw.githubusercontent.com/giaodienblog/cdn/refs/heads/master/provinces-database.json");
    const data = await res.json();
    const provinceSelect = document.getElementById('province');
    const wardSelect = document.getElementById('ward');
    const resultDiv = document.getElementById('result');
    const MUNICIPALITIES = ["Hà Nội", "Hồ Chí Minh", "Hải Phòng", "Đà Nẵng", "Cần Thơ", "Huế"];
    data.forEach(p => {
      const opt = document.createElement("option");
      const name = p.Name || p.FullName || p.name;
      const isCity = MUNICIPALITIES.some(c => name.toLowerCase().includes(c.toLowerCase()));
      opt.value = p.Code || p.code || name;
      opt.textContent = (isCity ? "Thành phố " : "Tỉnh ") + name;
      provinceSelect.appendChild(opt);
    });
    provinceSelect.addEventListener("change", () => {
      wardSelect.innerHTML = '<option value="">-- Chọn xã/phường --</option>';
      resultDiv.style.display = "none";
      resultDiv.innerHTML = "";
      const prov = data.find(p => (p.Code || p.code) == provinceSelect.value);
      if (prov && prov.Wards) {
        prov.Wards.forEach(w => {
          const o = document.createElement("option");
          o.value = w.Code || w.code;
          o.textContent = (w.AdministrativeUnitShortName ? w.AdministrativeUnitShortName + " " : "") + (w.Name || w.FullName || w.name);
          wardSelect.appendChild(o);
        });
      }
    });
    wardSelect.addEventListener("change", () => {
      const prov = data.find(p => (p.Code || p.code) == provinceSelect.value);
      const ward = prov?.Wards?.find(w => (w.Code || w.code) == wardSelect.value);
      if (prov && ward) {
        const provName = provinceSelect.options[provinceSelect.selectedIndex].textContent;
        resultDiv.innerHTML = `<strong>Địa chỉ chọn:</strong><br>${provName} - ${ward.FullName||ward.Name||ward.name}`;
        resultDiv.style.display = "block";
      } else {
        resultDiv.style.display = "none";
        resultDiv.innerHTML = "";
      }
    });
  }
  loadData();
</script>