Hi,

The following code retrieves the state based on the country_id. Similarly, you can obtain the city based on the state.

XML:

<template id="country_template" name="Country">

    <t t-call="website.layout">

        <div class="container">

            <form class="form" id="create_form" method="post" action="/create/form">

                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>

                <div class="row mb-3">

                    <label for="country_id" class="col-sm-2 col-form-label">Country</label>

                    <div class="col-sm-10">

                        <select id="country_id" name="country" class="form-control">

                        </select>

                    </div>

                </div>

                <div class="row mb-3">

                    <label for="state_id" class="col-sm-2 col-form-label">State</label>

                    <div class="col-sm-10">

                        <select id="state_id" name="state" class="form-control">

                        </select>

                    </div>

                </div>

            </form>

        </div>

    </t>

</template>

.py:

class CountryData(Controller):

@route('/data', auth='public', website=True)

def form_data(self):

country_id = request.env['res.country'].sudo().search([])

return request.render('module_name.country_template', {'country_id': country_id})

@route('/create/form', auth='public', website=True)

def create_form(self, **kw):

form = request.env['model.name'].sudo().create({

'country_id': kw.get('country'),

'state_id': kw.get('state'),

'city_id': kw.get('city'),

        })

return request.render('module_name.country_template', {'form': form})

@route('/get_states', type="json", auth='public', website=True)

def get_states(self, country_id):

states = request.env['res.country.state'].sudo().browse(int(country_id))

return states

JS:

publicWidget.registry.CountryData = publicWidget.Widget.extend({

selector: '#create_form',

    events: {

'change #country_id': '_onCountryChange',

    },

init: function (parent, options) {

this._super.apply(this, arguments);

this.rpc = this.bindService("rpc");

    },

_onCountryChange: async function () {

var self = this

        var country_id = this.$el.find('#country_id').val();

await jsonrpc("/get_states", {

            country_id: country_id

}).then(function (records) {

self.$el.find('#state_id').empty();

self.$el.find('#state_id').prepend('<option value="">Select State</option>');

records.forEach(function (record) {

self.$('#state_id').append(

`<option value="${record.id}">${record.name}</option>`

                );

            });

        });

    },

})

Hope it helps.