Cách tích hợp bộ lọc select chọn nhanh Tỉnh, Thành & Quận, Huyện

Nếu bạn đang sử dụng theme blogspot bán hàng, bạn nên tích hợp bộ chọn Quận, Huyện của 63 Tỉnh, Thành vào form bán hàng của theme giúp khách hàng chọn nhanh Tỉnh, Thành và Quận, Huyện thay vì phải điền vào thẻ input.

Bộ lọc Quận, Huyện của 63 Tỉnh Thành

Thẻ select được sử dụng để tạo danh sách thả xuống trong đó có chứa các thẻ option với mỗi option là một tùy chọn. Các thẻ option con bên trong phần tử select xác định các tùy chọn khả dụng trong danh sách.

Plugin districts.min.js mình viết đã tích hợp sẵn Danh sách 63 Tỉnh / Thành Phố Việt Nam và danh sách Quận / Huyện của mỗi Tỉnh / Thành Phố. Khi bạn chọn Tỉnh hoặc Thành Phố, bên bộ chọn Quận, Huyện sẽ hiển thị danh sách Quận, Huyện thuộc Tỉnh hay Thành Phố đó. Ngoài ra mình thêm tùy chọn lưu trữ cục bộ nếu đã chọn, khi tải lại trang hiển thị mục đã chọn.

Cách thực hiện:

+ Bước 1: Chèn thẻ select hiển thị

<select name="calc_shipping_provinces" required="">

  <option value="">Tỉnh / Thành phố</option>

</select>

<select name="calc_shipping_district" required="">

  <option value="">Quận / Huyện</option>

</select>

<input class="billing_address_1" name="" type="hidden" value="">

<input class="billing_address_2" name="" type="hidden" value="">

+ Bước 2: Chèn code script trước thẻ đóng </body> của template

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

<script src='https://cdn.jsdelivr.net/gh/vietblogdao/js/districts.min.js'/>

<script>//<![CDATA[

if (address_2 = localStorage.getItem('address_2_saved')) {

  $('select[name="calc_shipping_district"] option').each(function() {

    if ($(this).text() == address_2) {

      $(this).attr('selected', '')

    }

  })

  $('input.billing_address_2').attr('value', address_2)

}

if (district = localStorage.getItem('district')) {

  $('select[name="calc_shipping_district"]').html(district)

  $('select[name="calc_shipping_district"]').on('change', function() {

    var target = $(this).children('option:selected')

    target.attr('selected', '')

    $('select[name="calc_shipping_district"] option').not(target).removeAttr('selected')

    address_2 = target.text()

    $('input.billing_address_2').attr('value', address_2)

    district = $('select[name="calc_shipping_district"]').html()

    localStorage.setItem('district', district)

    localStorage.setItem('address_2_saved', address_2)

  })

}

$('select[name="calc_shipping_provinces"]').each(function() {

  var $this = $(this),

    stc = ''

  c.forEach(function(i, e) {

    e += +1

    stc += '<option value=' + e + '>' + i + '</option>'

    $this.html('<option value="">Tỉnh / Thành phố</option>' + stc)

    if (address_1 = localStorage.getItem('address_1_saved')) {

      $('select[name="calc_shipping_provinces"] option').each(function() {

        if ($(this).text() == address_1) {

          $(this).attr('selected', '')

        }

      })

      $('input.billing_address_1').attr('value', address_1)

    }

    $this.on('change', function(i) {

      i = $this.children('option:selected').index() - 1

      var str = '',

        r = $this.val()

      if (r != '') {

        arr[i].forEach(function(el) {

          str += '<option value="' + el + '">' + el + '</option>'

          $('select[name="calc_shipping_district"]').html('<option value="">Quận / Huyện</option>' + str)

        })

        var address_1 = $this.children('option:selected').text()

        var district = $('select[name="calc_shipping_district"]').html()

        localStorage.setItem('address_1_saved', address_1)

        localStorage.setItem('district', district)

        $('select[name="calc_shipping_district"]').on('change', function() {

          var target = $(this).children('option:selected')

          target.attr('selected', '')

          $('select[name="calc_shipping_district"] option').not(target).removeAttr('selected')

          var address_2 = target.text()

          $('input.billing_address_2').attr('value', address_2)

          district = $('select[name="calc_shipping_district"]').html()

          localStorage.setItem('district', district)

          localStorage.setItem('address_2_saved', address_2)

        })

      } else {

        $('select[name="calc_shipping_district"]').html('<option value="">Quận / Huyện</option>')

        district = $('select[name="calc_shipping_district"]').html()

        localStorage.setItem('district', district)

        localStorage.removeItem('address_1_saved', address_1)

      }

    })

  })

})

//]]></script>

Lưu ý: Nếu theme của bạn đã có thư viện jquery, bạn có thể xóa link jquery.min.js