动态更改表单中的选择值，如何保存它们

Question

Html Code

<select id = "country">
<option selected = "selected" value = "0">all</option>
<option value = "1">country1</option>
<option value = "2">country2</option>
<option value = "3">country3</option>
</select>

<select id = "region">
<option selected = "selected">all</option>
</select>

Javascript 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<regions[v].length; i++) 
        $("#region").append(new Option(regions[v][i].split("|")[0]),
                        regions[v][i].split("|")[1])
});
});

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?

Answer 1

尽管您可能需要考虑JSON ，但是使用JavaScript数组没有任何问题。

Answer 2

You can put your array in separate js file and include that file for desired pages;

array-form.js

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"]

Include this file any page you want