Select tỉnh huyện xã javascript

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.

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ị

  Tỉnh / Thành phố





  Quận / Huyện

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

//
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 += '' + i + ''

    $this.html['Tỉnh / Thành phố' + 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 += '' + el + ''

          $['select[name="calc_shipping_district"]'].html['Quận / Huyện' + 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['Quận / Huyện']

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

        localStorage.setItem['district', district]

        localStorage.removeItem['address_1_saved', address_1]

      }

    }]

  }]

}]

//]]>

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