Dynamic change of select values in a form, how to save them
<p>Html Code</p>

<pre><code>&lt;select id = "country"&gt;
&lt;option selected = "selected" value = "0"&gt;all&lt;/option&gt;
&lt;option value = "1"&gt;country1&lt;/option&gt;
&lt;option value = "2"&gt;country2&lt;/option&gt;
&lt;option value = "3"&gt;country3&lt;/option&gt;
&lt;/select&gt;

&lt;select id = "region"&gt;
&lt;option selected = "selected"&gt;all&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Javascript Code</p>

<pre><code> //add an option and it's value with jquery append and javascript split.
 //Array elements are in form of option|value 
 //so that we can process them with split
var regions = new Array()
regions[0] = ["all|1"];
regions[1] = ["region1|2","region2|3"]
regions[2] = ["region3|4","region4|5"]
regions[3] = ["region5|6","region6|7"]

$(document).ready(function() {

$("#country").change(function(){
    $("#region").empty()
    var v = $("#country").val()
    for(i=0; i&lt;regions[v].length; i++) 
        $("#region").append(new Option(regions[v][i].split("|")[0]),
                        regions[v][i].split("|")[1])
});
});
</code></pre>

<p>I will have many different forms like this (so i will have to create many arrays) and every form will be reused to more than one pages, so if i want to add a new option inside a select tag, code must be in one place, so that i will do the changes once. The arrays will be really long.. I'm thinking of putting the first select in an external file and retrieve it with php, and the arrays for the second select will be all in an external javascript file that will be included in all my files.. Can you think of a cleaner implementation so that i don't have to make large arrays in a basic javascript file or do you think it's a correct method?</p>
