https://positionstack.com/js/shared/countries.js

1function syncStateField() {
2    const countries = JSON.parse(document.getElementById('countries').innerHTML)
3        let stateInput = $('input.state')
4        let stateLabel = $('label.state-label')
5        let stateSelect = $('select.state-select')
6        let stateSelectLabel = $('label.state-select-label')
7        let currentState = (stateSelect.val() || stateInput.val() || "").trim();
8
9        stateSelect.hide()
10        stateSelectLabel.hide()
11
12        
13        let country = ($(".country_code").find("option:selected").text() || "").trim()
14        let states = countries[country]
15
16        if(states !== undefined) {
17            stateInput.hide()
18            stateLabel.hide()
19            stateSelect.show()
20            stateSelectLabel.show()
21
22            stateInput.val('')
23            stateSelect.find('option').remove()
24            stateSelect.prop('required', true);
25            stateSelect.append(new Option('Select a state', ''))
26
27            $.each(states, (key, val) => {
28                stateSelect.append(new Option(val, val))
29            });
30            if (currentState && stateSelect.find('option[value="' + currentState + '"]').length) {
31               stateSelect.val(currentState);
32            }
33        }else{
34            stateInput.show()
35            stateLabel.show()
36            stateSelect.hide()
37            stateSelectLabel.hide()
38
39            stateSelect.find('option').remove()
40            stateSelect.prop('required', false);
41        }
42}
43
44$(document).ready(function() {
45    syncStateField();
46    $('.country_code').on('change', function() {
47        syncStateField();
48    });
49});