Hi,

You can try like this

XML:-

<div class="col-12 col-sm-12 col-md-6 col-lg-6 py-3">

    <label class="se-form-label"

      for="country_id">

   Country

</label>

    <select name="country_id"

id="country_id"

class="form-control se-form-control">

        <option selected="1"

   disabled="1">

Select Country

   </option>

        <t t-foreach="countries or []"

      t-as="country">

            <option t-att-value="country.id">

                <t t-esc="country.name"/>

            </option>

        </t>

    </select>

</div>

<div class="col-12 col-sm-12 col-md-6 col-lg-6 py-3">

    <label class="se-form-label"

      for="state_id">

   State

</label>

    <select name="state_id"

id="state_id"

class="form-control se-form-control">

        <option selected="1"

   disabled="1">

Select State

   </option>

        <t t-foreach="states or []"

      t-as="state">

            <option t-att-value="state.id"

       t-att-data-country_id="state.country_id.id">

                <t t-esc="state.name"/>

            </option>

        </t>

    </select>

</div>

JS:-

$("select[name='country_id']").change(function(){
         var $select_state = $("select[name='state_id']");
         $select_state.find("option:not(:first)").hide();
         var nb = $select_state.find("option[data-country_id="+($(this).val() || 0)+"]").show().length;
         $select_state.val(0);
});

Regards