javascript - How to clear old values on click of country and state in the form? -

i have problem in html form.now in stage of : need select country if select india states list of india or again if change dropdown switzerland text box type state. shown below.

here in picture have selected india , state selected gujarat.

here again have selected switzerland , state typed bern

my problem if change country switzerland canada. state typed 'bern' remain same, in third image. need make field empty. while selecting different country need make state field empty please me out [i using html, js , php ].

script :

function showhidestatedetails()     {         if(document.getelementbyid("ai_country").value == 'india')         {                 document.getelementbyid("ai_other_state").style.display='none';                  document.getelementbyid("ai_ind_state").style.display='';         }         else         {                document.getelementbyid("ai_ind_state").style.display='none';              document.getelementbyid("ai_other_state").style.display='';           }        } 

html :

       <!-- country -->                                <label for="ai_country">country</label>         <input id='ai_country' onchange="showhidestatedetails()" >         <!-- state -->             <label for="ai_state">state<</label>        <input type="text" id="ai_other_state">                <select  id="ai_ind_state" style="display: none;">                     <option value="">select</option>                                                                         <option value="andhra pradesh">andhra pradesh</option>                                                                               <option value="arunachal pradesh">arunachal pradesh</option>                                                                                 <option value="assam">assam</option>                     <option value="bihar">bihar</option>                     <option value="chandigarh">chandigarh</option>                     <option value="chhattisgarh">chhattisgarh</option>                     <option value="dadra , nagar haveli">dadra , nagar haveli</option>                     <option value="daman , diu">daman , diu</option>                     <option value="delhi">delhi</option>                     <option value="goa">goa</option>                     <option value="gujarat">gujarat</option>                     <option value="uttaranchal">uttaranchal</option>                     <option value="west bengal">west bengal</option>                </select> 

thanks in advance

below code shows how clear "state" dropdown , store value of selected state hidden variable.

function onindexchange()  {  	//store selected value ai_ind_state ai__state  	document.getelementbyid("ai__state").value = document.getelementbyid("ai_ind_state").value;  	  	//now clear ai_ind_state dropdown  	document.getelementbyid("ai_ind_state").value = "";  	  	//write output reference  	document.getelementbyid("tmp_output").innerhtml = "last selected state: " + document.getelementbyid("ai__state").value;  	  }

<form>  <select name="country" onchange="onindexchange()" id="country">  	<option value="">select country</option>  	<option value="1">c1</option>  	<option value="2">c2</option>  	<option value="3">c3</option>  </select>  <select name="ai_ind_state" id="ai_ind_state">  	<option value="">select state</option>  	<option value="1">s1</option>  	<option value="2">s2</option>  	<option value="3">s3</option>  </select>  <input type="hidden" name="ai__state" id="ai__state">  </form>  <span id="tmp_output"></span>