CODE
BÀI VIẾT
<div> <select class="form-select form-select-sm mb-3" id="city" aria-label=".form-select-sm"> <option value="" selected>Chọn tỉnh thành</option> </select> <select class="form-select form-select-sm mb-3" id="district" aria-label=".form-select-sm"> <option value="" selected>Chọn quận huyện</option> </select> <select class="form-select form-select-sm" id="ward" aria-label=".form-select-sm"> <option value="" selected>Chọn phường xã</option> </select> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> <script> var citis = document.getElementById("city"); var districts = document.getElementById("district"); var wards = document.getElementById("ward"); var Parameter = { url: "https://raw.githubusercontent.com/kenzouno1/DiaGioiHanhChinhVN/master/data.json", method: "GET", responseType: "application/json", }; var promise = axios(Parameter); promise.then(function (result) { renderCity(result.data); }); function renderCity(data) { for (const x of data) { citis.options[citis.options.length] = new Option(x.Name, x.Id); } citis.onchange = function () { district.length = 1; ward.length = 1; if(this.value != ""){ const result = data.filter(n => n.Id === this.value); for (const k of result[0].Districts) { district.options[district.options.length] = new Option(k.Name, k.Id); } } }; district.onchange = function () { ward.length = 1; const dataCity = data.filter((n) => n.Id === citis.value); if (this.value != "") { const dataWards = dataCity[0].Districts.filter(n => n.Id === this.value)[0].Wards; for (const w of dataWards) { wards.options[wards.options.length] = new Option(w.Name, w.Id); } } }; } </script>
Bộ lọc select chọn Tỉnh Thành, Quận huyện, Xã phường
jQuery
ihoan
đã viết 2 năm trước
Bộ lọc select chọn Tỉnh Thành, Quận huyện, Xã phường
14737
Bài viết cùng chủ đề
Tải về nội dung trong textarea bằng jQuery
Bộ lọc select tỉnh thành, quận huyện sử dựng API provinces.open-api.vn
Code jQuery thu gọn, mở rộng đoạn text
Hiệu ứng Animated Number Counter bằng jQuery
Tự động cập nhật nội dung cho div khi nhập văn bản vào textarea
jQuery tạo hiệu ứng chữ tự động nhảy ra như đang nhập liệu