Code Dropdown 63 Tỉnh Thành

Hướng Dẫn Tạo Dropdown Chọn Tỉnh, Quận, Huyện, Phường Trong HTML và JavaScript

Việc xây dựng một dropdown chọn tỉnh, quận, huyện, và phường là nhu cầu phổ biến khi thiết kế form đăng ký hoặc thu thập thông tin từ người dùng. Trong bài viết này, mình sẽ hướng dẫn bạn cách thực hiện điều này bằng cách sử dụng HTML, jQuery và API dữ liệu.

Hướng dẫn chi tiết cách tạo dropdown 63 tỉnh thành, quận, huyện, phường trong HTML và JavaScript. Code dễ dàng tích hợp, tối ưu cho mọi dự án web

Tại Sao Nên Sử Dụng Dropdown Chọn Tỉnh/Quận/Huyện/Phường?

Dropdown giúp người dùng dễ dàng chọn thông tin chính xác, giảm thiểu sai sót khi nhập liệu. Ngoài ra:

Tiện lợi: Người dùng không cần nhập thủ công.
Đồng bộ dữ liệu: Dữ liệu được chuẩn hóa, tránh trùng lặp hoặc sai chính tả.
Tích hợp dễ dàng: Code có thể tích hợp vào mọi dự án web, từ đơn giản đến phức tạp.

Demo Code Dropdown

Dưới đây là mã nguồn đầy đủ, tối ưu cho mọi dự án web. Bạn chỉ cần sao chép và thay thế vào file HTML của mình.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<select id="city">
<option value="" selected="selected">Chọn tỉnh / TP</option>
</select>
<select id="district">
<option value="" selected="selected">Chọn quận huyện</option>
</select>
<select id="ward">
<option value="" selected="selected">Chọn phường xã</option>
</select>
<input type="text" id="resultInput" />
<script>
const url = "https://raw.githubusercontent.com/giaodienblog/provinces/refs/heads/main/district.json";
let data = [];
const callAPI = () => {
$.getJSON(url, (response) => {
data = response;
renderData(data, "city", "Chọn tỉnh / TP");
}).fail((jqxhr, textStatus, error) => {
console.error("Có lỗi khi lấy dữ liệu:", textStatus, error);
});
};
const renderData = (array, select, defaultText = "Chọn") => {
let options = `<option value="" selected>${defaultText}</option>`;
$.each(array, (index, element) => {
options += `<option data-id="${element.code}" value="${element.name}">${element.name}</option>`;
});
$(`#${select}`).html(options);
};
$("#city").on("change", function() {
const cityId = parseInt($(this).find(":selected").data("id"));
const selectedCity = data.find((d) => d.code === cityId);
if (selectedCity) {
renderData(selectedCity.districts, "district", "Chọn quận huyện");
} else {
$("#district").html('<option value="" selected>Chọn quận huyện</option>');
}
$("#ward").html('<option value="" selected>Chọn phường xã</option>');
printResult();
});
$("#district").on("change", function() {
const districtId = parseInt($(this).find(":selected").data("id"));
const cityId = parseInt($("#city").find(":selected").data("id"));
const selectedCity = data.find((d) => d.code === cityId);
if (selectedCity) {
const selectedDistrict = selectedCity.districts.find((d) => d.code === districtId);
if (selectedDistrict) {
renderData(selectedDistrict.wards, "ward", "Chọn phường xã");
} else {
$("#ward").html('<option value="" selected>Chọn phường xã</option>');
}
}
printResult();
});
$("#ward").on("change", function() {
printResult();
});
const printResult = () => {
const citySelect = $("#city");
const districtSelect = $("#district");
const wardSelect = $("#ward");
if (districtSelect.find(":selected").data("id") && citySelect.find(":selected").data("id") && wardSelect.find(":selected").data("id")) {
const result = `${citySelect.find(":selected").text()}, ${districtSelect.find(":selected").text()}, ${wardSelect.find(":selected").text()}`;
$("#resultInput").val(result);
} else {
$("#resultInput").val("");
}
};
callAPI();
</script>