Code Plugin JQuery, HTML chọn Tỉnh/Thành Phố, Quận/Huyện, Xã Phường Việt Nam 2023

Ở bài viết trước mình đã chia sẻ với các bạn bộ dữ liệu về Tỉnh/Thành Phố, Quận/Huyện, Xã/Phường Việt Nam bằng Database của SQL Server và MySQL. 

Các bạn có thể vào bài viết Share dữ liệu Database MySQL, SQL Server và API về Tỉnh (TP), Quận (huyện), Xã Phường Việt Nam 2023 để xem chi tiết.

Với bộ dữ liệu đó khá là hữu ích đối với các bạn nào đang phát triển web hoặc ứng dụng về mua bán hàng hoặc hành chính công.

Và để tiếp tục về chủ đề này mình sẽ code một Plugin cho bộ dữ liệu đó cho website. 

Thư viện sử dụng

Thư viện sử dụng trong bài này bao gồm:

• - JQuery 3.6.0
• - Select2

Nguồn dữ liệu

Dữ liệu về Tỉnh/Thành Phố, Quận/Huyện, Xã/Phường mình sẽ lấy từ 3 API mà mình đã up lên npoint.io

// Province - Tỉnh, Thành Phố

Method: GET

URL: https://api.npoint.io/ac646cb54b295b9555be

------------------------------------------------

// District - Quận, Huyện

Method: GET

URL: https://api.npoint.io/34608ea16bebc5cffd42

------------------------------------------------

// Ward- Xã Phường

Method: GET

URL: https://api.npoint.io/dd278dc276e65c68cdf5

Code giao diện

<form>
  <div class="form-group">
    <label for="Province">Tỉnh/Thành Phố</label>
    <select id="Province" class="form-control"></select>
  </div>
  <div class="form-group">
    <label for="District">Quận/Huyện</label>
    <select id="District" class="form-control"></select>
  </div>
  <div class="form-group">
    <label for="Ward">Xã/Phường</label>
    <select id="Ward" class="form-control"></select>
  </div>
  <button class="btn btn-success" id="BtnGetDataSelected" type="button">
    Get Data Được Chọn
  </button>

  <ul style="margin-top: 50px;" id="DataText"></ul>
  <ul style="margin-top: 50px;" id="DataId"></ul>
</form>

Code xử lý

Đầu tiên mình sẽ viết một hàm Common sử dụng Select2 để tạo ra select box thay thế cho thẻ select thuần HTML

var singleSelectDropdown = function (id, placeholder, data, selectItem) {
  setTimeout(function () {
    $("#" + id).select2({
      placeholder: placeholder,
      data: data.map(function (item) {
        return {
          id: item.Id,
          text: item.Name,
        };
      }),
      allowClear: true,
    });
  }, 200);

  if (selectItem !== null) {
    setTimeout(function () {
      $("#" + id)
        .val(selectItem)
        .trigger("change");
    }, 200);
  }
};

Các biến global:

const provice_url = "https://api.npoint.io/ac646cb54b295b9555be";
const district_url = "https://api.npoint.io/34608ea16bebc5cffd42";
const ward_url = "https://api.npoint.io/dd278dc276e65c68cdf5";

var province_list = [];
var district_list = [];
var ward_list = [];

Hàm get thông tin dữ liệu:

var getProviceData = function (callback) {
  $.getJSON(provice_url, function (list) {
    callback(list);
  });
};

var getDistrictData = function (callback) {
  $.getJSON(district_url, function (list) {
    callback(list);
  });
};

var getWardData = function (callback) {
  $.getJSON(ward_url, function (list) {
    callback(list);
  });
};

Các hàm handle sự kiện tích chọn trên thẻ select và button Get Data Được Chọn bao gồm:

var hanldeButtonGetData = function(){
    $("#BtnGetDataSelected").on('click', function(e){
        e.preventDefault();
        let data = getDataSelected();
        $('#DataText').html('');
        $('#DataId').html('');

        $('#DataText').append('<li>Tỉnh/Thành Phố: <strong>' + data.ProvinceText + '</strong></li>');
        $('#DataText').append('<li>Quận/Huyện: <strong>' + data.DistrictText + '</strong></li>');
        $('#DataText').append('<li>Xã/Phường: <strong>' + data.WardText + '</strong></li>');

        $('#DataId').append('<li>Province Id: <strong>' + data.ProvinceId + '</strong></li>');
        $('#DataId').append('<li>District Id: <strong>' + data.DistrictId + '</strong></li>');
        $('#DataId').append('<li>Ward Id: <strong>' + data.WardId + '</strong></li>');
    });
}

var hanldeOnchangeProvice = function () {
  $("#Province").on("change", function () {
    var id = $(this).val();
    if (id) {
      
      $("#District").empty();

      var data_filter = district_list.filter(
        (entry) => entry.ProvinceId === parseInt(id)
      );
      
      singleSelectDropdown("District", "Chọn Quận/Huyện", data_filter);
    }
  });
};

var hanldeOnchangeDistrict = function () {
    $("#District").on("change", function () {
      var id = $(this).val();
      if (id) {
        
        $("#Ward").empty();
  
        var data_filter = ward_list.filter(
          (entry) => entry.DistrictId === parseInt(id)
        );
        
        singleSelectDropdown("Ward", "Chọn Xã/Phường", data_filter);
      }
    });
};

Cuối cùng là các hàm gán data cho các biến province_list, district_list, ward_list, tạo bộ data select cho Tỉnh/Thành Phố và hàm get data được chọn:

var getDataSelected = function(){
    return {
        ProvinceText: $('#Province').find("option:selected").text(),
        ProvinceId:  $('#Province').val(),
        DistrictText:  $('#District').find("option:selected").text(),
        DistrictId:  $('#District').val(),
        WardText:  $('#Ward').find("option:selected").text(),
        WardId:  $('#Ward').val()
    }
}

var initProviceDropdown = function () {
  var interval = setInterval(function () {
    if (province_list.length > 0) {
      singleSelectDropdown("Province", "Chọn Tỉnh/Thành Phố", province_list);
      clearInterval(interval);
    }
  }, 100);
};

var getAllDataForDropdown = function () {
  getProviceData(function (list) {
    province_list = list;
  });

  getDistrictData(function (list) {
    district_list = list;
  });

  getWardData(function (list) {
    ward_list = list;
  });
};

Cuối cùng để sử được mình gọi các hàm đó như sau:

$(document).ready(function () {
  getAllDataForDropdown();
  initProviceDropdown();
  hanldeOnchangeProvice();
  hanldeOnchangeDistrict();
  hanldeButtonGetData();
});

Thành quả sau 7749 lần code

Giờ thì các bạn có thể cầm bộ source này paste vào bất cứ Website nào các bạn muốn thì đều chạy ngon lành cành đào nhé 😁

Share giúp mình nếu các bạn thấy hay nhé!

Thanks, u 😎