openerp - Passing recordset to object in template from controller Odoo -

i have form in odoo website has country , state selection fields. form populated controller pass recordset of states , countries values in dict states , countries keys. selection field, looped using t-foreach through states provide option , values. upon selection of country, need able filter out states of particular country. possible , if yes how? here of code have attempted: following controller loads form , second method filter out states

@http.route('/admission_applications', type='http', auth="public", website=true) def application_form(self):     cr, uid, context, registry = request.cr, request.uid, request.context, request.registry     classes=[('lkg',"lkg"),('ukg',"ukg"),('1', "1st"), ('2', "2nd"),('3', "3rd"),('4', "4th"),('5', "5th"),('6', "6th"),('7', "7th"),('8', "8th"),('9', "9th"),('10', "10th"),('11', "11th"),('12', "12th")]     gender=[('male', "male"), ('female', "female")]     orm_country = http.request.env['res.country']     state_orm = http.request.env['res.country.state']     countries = orm_country.search([])     #countries = orm_country.browse(cr, superuser_id, country_ids, context)     states = state_orm.search([])     #states = state_orm.browse(cr, superuser_id, states_ids, context)     return request.render("website_admission_application.admission_form", {'classes':classes, 'gender':gender, 'countries':countries, 'states':states})    @http.route('/action_get_states/<country_id>',type='http', auth="public", website=true) def states_listing(self,country_id):     states_info=[]          logging.error(country_id)     states=http.request.env['res.country.state'].search([('country_id.id','=',country_id)])     state in states:         states_info.append({'id':state.id, 'name':state.name})       logging.error(states_info)           return states_info  

the next template related code:

<div t-attf-class="form-group form-field o_website_form_required_custom margin-0" t-if="countries">     <div class="col-sm-12 col-md-6">     <label class="control-label" for="country_id">country</label>     <select name="country_id" id="country_id" class="form-control" onchange="countryselection()" required="">          <option value="">country...</option>          <t t-foreach="countries" t-as="country">              <option t-att-value="country.id"><t t-esc="country.name"/></option>          </t>     </select>     </div>     <div class="col-sm-12 col-md-6">         <label class="control-label" for="state_id">state</label>          <select name="state_id" id="state_id" class="form-control" required="">              <option value="">state...</option>              <t t-foreach="states" t-as="state">                  <option t-att-value="state.id"><t t-esc="state.name"/></option>              </t>          </select>      </div>   </div> 

the js call controller method filter states this:

function countryselection() {     alert("hai");     var country = document.getelementbyid('country_id').value;     alert(country);     $.ajax({         type: "get",         url: "/action_get_states/"+country,         success: function(data) {             $("states").html(data);         }     });      } 

i know isn't right way, not sure of how can return recordset states have loaded form.

//this example used on odoo website. // make proper changes changing field names.     $(document).ready(function () {          $('select[name=country_id]').change(function () {         $('#state_id option').remove();         var states = new model('res.country.state').call('search_read',[[['country_id', '=', parseint($('select[name=country_id]').val())]]]).then(function(result){         (var i=0; i<result.length; i++){             $('#state_id').append($('<option>',                  {                     value: result[i].id,                     text : result[i].name                  }));         }         })          });