Dynamic change of select values in a form, how to save them

1. <select id = "country">
2. <option selected = "selected" value = "0">all</option>
3. <option value = "1">country1</option>
4. <option value = "2">country2</option>
5. <option value = "3">country3</option>
6. </select>
7.  
8. <select id = "region">
9. <option selected = "selected">all</option>
10. </select>
11.        
12. //add an option and it's value with jquery append and javascript split.
13.  //Array elements are in form of option|value
14.  //so that we can process them with split
15. var regions = new Array()
16. regions[0] = ["all|1"];
17. regions[1] = ["region1|2","region2|3"]
18. regions[2] = ["region3|4","region4|5"]
19. regions[3] = ["region5|6","region6|7"]
20.  
21. $(document).ready(function() {
22.  
23. $("#country").change(function(){
24.     $("#region").empty()
25.     var v = $("#country").val()
26.     for(i=0; i<regions[v].length; i++)
27.         $("#region").append(new Option(regions[v][i].split("|")[0]),
28.                         regions[v][i].split("|")[1])
29. });
30. });
31.        
32. var regions = new Array()
33. regions[0] = ["all|1"];
34. regions[1] = ["region1|2","region2|3"]
35. regions[2] = ["region3|4","region4|5"]
36. regions[3] = ["region5|6","region6|7"]