A way to realize two select linkage

I wrote it for my friend today. Linkage of the way there are many, write this when the main consideration, so that the server to do more work, as an example test method only 6 lines of code, the speed of the browser should be very fast, but also does not occupy the browser's memory, the most recent writing JavaScript, often encountered performance problems, So, from now on, pay attention.

The following code is simpler, actually relies on a naming convention and the method of cloning objects, cloning is not necessary, but I think it is true. If the volume of data can not be cloned directly hidden display can be, the background to do a simple logical judgment. < HTML >
< head >
< script type = "Text/javascript" >
function $ (ID) {
return document.getElementById (ID);
}
function Test () {
var echild = $ (' child_ ' + $ ("parent"). Value). CloneNode (True);
Echild.name = "Child";
EChild.style.display = "";
Echild.value = "C2"
$ ("Cspan"). InnerHTML = "";
$ ("Cspan"). AppendChild (Echild);
}
function init () {
Test ()
}
</script >
< body onload = "init ();" >
<%= Request.getparameter ("child")%>
< form method = "POST" >
< SELECT id = "Parent" onchange = "test ();" >
< option value = "1" > a </option >
< option value = "2" > B </option >
< option value = "3" > C </option >
</Select >
< span id = "CSPAN" ></span >
< SELECT id = "Child_1" style = "display:none;" >
< option value = "C1" > ca_a </option >
< option value = "C2" > cb_a </option >
< option value = "C3" > cc_a </option >
</Select >
< SELECT id = "Child_2" style = "display:none;" >
< option value = "C1" > ca_b1 </option >
< option value = "C2" selected > cb_b2 </option >
< option value = "C3" > cc_b3 </option >
</Select >
< SELECT id = "Child_3" style = "display:none;" >
< option value = "C1" > Ca_c </option >
< option value = "C2" > Cb_c </option >
< option value = "C3" > Cc_c </option >
</Select >
< input type = "Submit"/>
</form >
</Body >
</HTML >