https://github.com/wilfredpine/philippine-address-selector

Autofill selects input of Region, Province, City/Municipality, and Barangay in the Philippines.
https://github.com/wilfredpine/philippine-address-selector

address autofill barangay city html javascript jquery json municipalities philippines regions select selector web

Last synced: about 1 month ago
JSON representation

Autofill selects input of Region, Province, City/Municipality, and Barangay in the Philippines.

• Host: GitHub
• URL: https://github.com/wilfredpine/philippine-address-selector
• Owner: wilfredpine
• License: mit
• Created: 2021-10-11T06:54:01.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-18T08:44:07.000Z (10 months ago)
• Last Synced: 2024-02-18T09:32:51.750Z (10 months ago)
• Topics: address, autofill, barangay, city, html, javascript, jquery, json, municipalities, philippines, regions, select, selector, web
• Language: JavaScript
• Homepage: https://geoproject.confired.com/
• Size: 808 KB
• Stars: 8
• Watchers: 2
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Address Selector - Philippines

### PH Address JSON file from https://github.com/isaacdarcilla/philippine-addresses

![This is an image](https://lh3.googleusercontent.com/pw/AM-JKLU7NduoFSLoDW5Nz6l33o8-xRkynZIVAxuFjCYkKKmgtrTHxSSVz3gISZEsn9lb0OGG4MqIo0xAkygD0-5d0CV9VOpaqifVgEFgxc5k8ZYG3aiFvpLtUgq9XF69ONIwhKu9psfNKxDg8-XT4uf474DA=w909-h549-no?authuser=0)

### PSA PSGC

https://www.psa.gov.ph/classification/psgc

### Requirements:

- JQUERY

```html

  

```

- HTML Tags

```html

    

    

    

    

    

    

    

    

```

- Javascript

Load Region

```javascript

    // load region

    let dropdown = $('#region');

    dropdown.empty();

    dropdown.append('Choose Region');

    dropdown.prop('selectedIndex', 0);

    const url = 'ph-json/region.json';

    // Populate dropdown with list of regions

    $.getJSON(url, function (data) {

        $.each(data, function (key, entry) {

            dropdown.append($('').attr('value', entry.region_code).text(entry.region_name));

        })

    });

```

Change or Select Region

```javascript

// load provinces

$('#region').on('change', my_handlers.fill_provinces);

```

Load Province Function

```javascript

  function(){

    //selected region

    var region_code = $(this).val();

    // set selected text to input

    var region_text = $(this).find("option:selected").text();

    let region_input = $('#region-text');

    region_input.val(region_text);

    

    //province

    let dropdown = $('#province');

    dropdown.empty();

    dropdown.append('Choose State/Province');

    dropdown.prop('selectedIndex', 0);

    // filter & fill

    var url = 'ph-json/province.json';

    $.getJSON(url, function(data) {

        var result = data.filter(function(value){

            return value.region_code == region_code;

        });

        result.sort(function (a, b) {

            return a.province_name.localeCompare(b.province_name);

        });

        $.each(result, function (key, entry) {

            dropdown.append($('').attr('value', entry.province_code).text(entry.province_name));

        })

    });

  }

```

### Full Code

#### HTML

https://github.com/wilfredpine/philippine-address-selector/blob/main/index.html

#### JS

https://github.com/wilfredpine/philippine-address-selector/blob/main/ph-address-selector.js