Bộ lọc select tỉnh thành, quận huyện sử dựng API provinces.open-api.vn
Đây là bộ lọc quận huyện sử dụng API từ provinces.open-api.vn (API này được cập nhật liên tục nên không lo lỗi vị trí nhé)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <div> <select id="city"> <option value="" selected>Chọn tỉnh thành</option> </select> <select id="district"> <option value="" selected>Chọn quận huyện</option> </select> <select id="ward"> <option value="" selected>Chọn phường xã</option> </select> </div> <h2 id="result"></h2> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> <script> const host = "https://provinces.open-api.vn/api/"; var callAPI = (api) => { return axios.get(api) .then((response) => { renderData(response.data, "city"); }); } callAPI('https://provinces.open-api.vn/api/?depth=1'); var callApiDistrict = (api) => { return axios.get(api) .then((response) => { renderData(response.data.districts, "district"); }); } var callApiWard = (api) => { return axios.get(api) .then((response) => { renderData(response.data.wards, "ward"); }); } var renderData = (array, select) => { let row = ' <option disable value="">Chọn</option>'; array.forEach(element => { row += `<option data-id="${element.code}" value="${element.name}">${element.name}</option>` }); document.querySelector("#" + select).innerHTML = row } $("#city").change(() => { callApiDistrict(host + "p/" + $("#city").find(':selected').data('id') + "?depth=2"); printResult(); }); $("#district").change(() => { callApiWard(host + "d/" + $("#district").find(':selected').data('id') + "?depth=2"); printResult(); }); $("#ward").change(() => { printResult(); }) var printResult = () => { if ($("#district").find(':selected').data('id') != "" && $("#city").find(':selected').data('id') != "" && $("#ward").find(':selected').data('id') != "") { let result = $("#city option:selected").text() + " | " + $("#district option:selected").text() + " | " + $("#ward option:selected").text(); $("#result").text(result) } } </script> Liên hệ Zalo/Viber để được hỗ trợ: 0918 99 2587 |
