两个 select 联动的一种实现方式

今天 帮朋友写的，联动的方式有很多，写这个的时候主要考虑，让服务端来做更多的工作，作为示例 test方法只有6行代码，浏览器的执行速度应该是非常快的，而且也不占浏览器的内存，最近写javascript，经常遇到性能问题，所以从现在起就的注意了

下面的代码比较简单，实际上依赖一个命名规则和克隆对象的方法，克隆其实不是必要的，但我觉得这样很真观。如果数据量大的话可以不克隆直接隐藏显示就可以了，后台做下简单的逻辑判断。

< 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 >
     </ head >
     < 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 >