Document

> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/cach-tich-hop-bo-loc-select-chon-nhanh-tinh-thanh-and-quan-huyen-districts-provinces-ok.md). # Cách tích hợp bộ lọc select chọn nhanh Tỉnh, Thành & Quận, Huyện, districts, provinces (ok) Api giao hàng nhanh: \ Token: 42d073a5-1f9c-11ed-8a70-52fa25d1292f C:\xampp\htdocs\code\index.html ``` Document ``` C:\xampp\htdocs\code {% file src="/files/NsrbWyyN70RYDTAiaOmd" %} {% file src="/files/UdguJ6I6mjo2qwbuhGSU" %} {% file src="/files/UdguJ6I6mjo2qwbuhGSU" %} ![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2Fr3UF1sDOYsTjBl22fOlE%2FScreenshot_1.png?alt=media\&token=1abd6907-33f2-42b3-aa2c-db608635a5bf) {% embed url="" %} {% file src="/files/O5wSFlSo7N3oLPkbX214" %} {% embed url="" %} {% file src="/files/s2SOpldO99HJJyzgMFrC" %} {% endfile %} {% file src="/files/Hx6jwnj4MmyeByDVbJ78" %} Hoặc {% file src="/files/NAGCTNLe24aK1q9xTiSy" %} {% embed url="" %} Hoac {% embed url="" %} {% file src="/files/TiJVA6IAuovINe4k91cL" %} ### DiaGioiHanhCHinhVN Script tự động tải file excel từ website tổng cục thống kê và chuyển sang dạng cây json. * Tỉnh * Id * Name * Districts * Id * Name * Wards * Id * Name * Level (Cấp hành chính phường,xã,thị trấn) ## Vietnam local selector - JavaScript plugin *Create HTML Select element for Vietnam province, district and ward.* ### Basic usage First, create 3 HTML Select elements for province, district and ward with name 'ls\_province', 'ls\_district' and 'ls\_ward' respectively: ``` ``` Finally, include the plugin to your document,create instance of the plugin and pass the identify of selectors to an object as parameter: ``` ``` ### Options ``` var options = { /* HTML Selector. You can pass value of name, id or class. It will automatically detect exist elements for you. Example: 'myIdOrClass','#myId', '.myClass', 'myName' */ province: 'ls_province', district: 'ls_district', ward: 'ls_ward', /* Define value for option tag. Valid option: id|name */ getValueBy: 'id', //Placeholder text provinceText: 'Chọn tỉnh / thành phố', districtText: 'Chọn quận / huyện', districtNoText: 'Địa phương này không có quận / huyện', wardText: 'Chọn phường / xã', wardNoText: 'Địa phương này không có phường / xã', // Default value if no location exist emptyValue: " ", // Hide option where no local exist hideEmptyValueOption: true, // Hide place-holder option (first option) hidePlaceHolderOption: true, /* Include local level on option text as prefix Example: true = Quận Bình Thạnh | false = Bình Thạnh */ provincePrefix: false, districtPrefix: true, wardPrefix: true, /* Include local level in option tag's attribute */ levelAsAttribute: true, levelAttributeName: "data-level", }; ``` [Xem bài viết:](https://nguyenthanhthinh.github.io/bo-loc-chon-tinh-thanh-quan-huyen-xa-phuong/?fbclid=IwAR0u-DWDY0U_ljkFnZq-LTSKkTMQWjcMon8bMEQa_A0vN07TdUXVxLY4ACo) ## Bộ lọc thay đổi Tỉnh Thành, Quận huyện, Xã phường JavaScriptMay 23, 2021 · 11 mins read![Bộ lọc thay đổi Tỉnh Thành, Quận huyện, Xã phường](https://nguyenthanhthinh.github.io/assets/img/js/result.png)Share this[Share](https://www.addtoany.com/share#url=https%3A%2F%2Fnguyenthanhthinh.github.io%2Fbo-loc-chon-tinh-thanh-quan-huyen-xa-phuong%2F%3Ffbclid%3DIwAR0u-DWDY0U_ljkFnZq-LTSKkTMQWjcMon8bMEQa_A0vN07TdUXVxLY4ACo\&title=B%E1%BB%99%20l%E1%BB%8Dc%20thay%20%C4%91%E1%BB%95i%20T%E1%BB%89nh%20Th%C3%A0nh%2C%20Qu%E1%BA%ADn%20huy%E1%BB%87n%2C%20X%C3%A3%20ph%C6%B0%E1%BB%9Dng%20%7C%20Thinh%20Nguyen)[Facebook](https://nguyenthanhthinh.github.io/#facebook)[Twitter](https://nguyenthanhthinh.github.io/#twitter) Đã lâu rồi mình không có làm website nói thật chứ mình thích web lắm mà không có cơ hội làm với nhiều lý do abcxyz :) . rãnh nên mình viết bài về web này nọ cho `có đam mê` lại với nghề ::)) Mình thấy bộ lọc này thường được sử dụng ở những website mình sẽ làm về nó từ giao diện đến cách xử lý nè :)) sử dụng `javascript` cơ bản và một số cú pháp `js mới` nhé ^^ Mình sử dụng `bootstrap 5` để làm giao diện . `cái nào mới là mình tò mò haha` ![js, javascript](https://nguyenthanhthinh.github.io/assets/img/js/ui-city.png) ``` Bộ lọc thay đổi tỉnh thành quận huyện phường xã

``` Giao diện mình đã làm xong, giờ thì mình sẽ đưa dữ liệu lên để hiển thị lên những `DropDownList` này. Thông thường thì sẽ là những api để đưa dữ liệu lên. Nhưng ở đây mình sẽ dùng `file json` mình kiếm được trên mạng [Truy cập vào để lấy file về nhé ](https://github.com/kenzouno1/DiaGioiHanhChinhVN/blob/master/data.json). Mình sẽ dùng thư viện `Axios` để lấy dữ liệu `file json` nhé. mình sử dụng *CDN* của nó ``. Code thay đổi ``` Bộ lọc thay đổi tỉnh thành quận huyện phường xã

``` Tiếp ta tạo file `app.js` sau khi tạo xong file `app.js` ta thêm code như sau vào file `app.js` ``` var Parameter = { url: './data/vietnam.json',//Đường dẫn đến file chứa dữ liệu hoặc api do backend cung cấp method:'GET', //do backend cung cấp responseType: 'application/json', //kiểu Dữ liệu trả về do backend cung cấp } //gọi ajax = axios => nó trả về cho chúng ta là một promise var promise = axios(Parameter); //Xử lý khi request thành công promise.then(function(result) { console.log(result.data) }); ``` kết quả như màn hình chúng ta đã thành công việc lấy dữ liệu về ::))) nói chứ làm ra là hứng thú nè haha, lập trình phải tò mò nhé mọi người không ra đừng nản nhé haha ![js, javascript](https://nguyenthanhthinh.github.io/assets/img/js/getdata.png) Bây giờ là bước quan trọng nè ta sẽ đổ dữ liệu vào `DropDownList Tỉnh Thành` Viết hàm `renderCity` ``` function renderCity(data){ for (const x of data) { citis.options[citis.options.length] = new Option(x.Name, x.Id); } } ``` Code cập nhật ``` var citis = document.getElementById("city"); var districts = document.getElementById("district"); var wards = document.getElementById("ward"); var Parameter = { url: './data/vietnam.json',//Đường dẫn đến file chứa dữ liệu hoặc api do backend cung cấp method:'GET', //do backend cung cấp responseType: 'application/json', //kiểu Dữ liệu trả về do backend cung cấp } //gọi ajax = axios => nó trả về cho chúng ta là một promise var promise = axios(Parameter); //Xử lý khi request thành công 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); } } ``` Khi mình thay đổi tỉnh thành nào thì sẽ hiển thị quận huyện ra. Trong javascript mình sẽ dùng event `onchange` nhé ``` function renderCity(data) { for (const x of data) { citis.options[citis.options.length] = new Option(x.Name, x.Id); } // xứ lý khi thay đổi tỉnh thành thì sẽ hiển thị ra quận huyện thuộc tỉnh thành đó 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); } } }; } ``` Tương tự khi thay đổi quận huyện thì sẽ hiện thị phường xã ``` // xứ lý khi thay đổi quận huyện thì sẽ hiển thị ra phường xã thuộc quận huyện đó 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); } } }; ``` Cập nhật toàn bộ code file `app.js` ``` var citis = document.getElementById("city"); var districts = document.getElementById("district"); var wards = document.getElementById("ward"); var Parameter = { url: "./data/vietnam.json", //Đường dẫn đến file chứa dữ liệu hoặc api do backend cung cấp method: "GET", //do backend cung cấp responseType: "application/json", //kiểu Dữ liệu trả về do backend cung cấp }; //gọi ajax = axios => nó trả về cho chúng ta là một promise var promise = axios(Parameter); //Xử lý khi request thành công 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); } // xứ lý khi thay đổi tỉnh thành thì sẽ hiển thị ra quận huyện thuộc tỉnh thành đó 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); } } }; // xứ lý khi thay đổi quận huyện thì sẽ hiển thị ra phường xã thuộc quận huyện đó 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); } } }; } ``` Thành quả 🤩🤩🤩🤩 ![js, javascript](https://nguyenthanhthinh.github.io/assets/img/js/result.png) *Do cấu trúc data mình vậy nên mình tùy biến lấy data . còn thực tế thì sẽ có những api cho riêng từng thằng tùy theo mỗi người viết hay ý đồ* nhưng logic cách xử lý thì tương tự. Lập trình thì mình tùy cơ ứng biến khi có thay đổi nhé ^^.