ajax - Javascript - Filling Combo Box with new data -

I am trying to fill the combobox (input) with data from AJAX. This is to get every city for a selected state, which is chosen on another selective control (state control).

What I have tried:

I am using a "change" event on the state combo box, when a state is selected , Then I search the city for it and organize the city's control.

  $ ("# state") On ("change", function () {getCities ($ (this), $ ("# city"))}); It's working really, but my real problem is that when I want to control this data, I'll have to click to fill it again (the previous state data is still there), I wish That this will be done when I finish the selection on the state's selection input. And another problem is that I am meeting with this, selecting the first option (--- city chosen ---) Every time the selection of the state changes the input cities. Function code:  
  function getCities (state control, city control) {if (stateControl.val ()) {var option = '& lt; Option value = "0" selected = "selected" & gt; --- Select city --- & lt; / Option & gt; '; CityControl.html (option); Var dataString = "state =" + stateControl.val (); $ .exax ({type: "post", url: "cities. Php", data: datestring, datatype: "jason", success: function (rivosta) {for (var i = 0; i & lt; resposta.length ; I ++) {options + = '& lt; option value = "' + city [i]. Cod_cidade + '" & gt;' + Cities [i] .nome + '& lt; / option & gt; ;}; ControleCidades.html (option);}}); }   
}   
 
 
 jQuery:  
  $ ("# city"). Find ('Options'). Remove ();   
 Javascript:  
  document.getElementById ('city'). Options.length = 0;   
 Use this before adding it, it will remove all the previous options.