求教：关于JavaScript控制<select>标签的问题

Question

我想做一个2级联的下拉列表 根据下拉列表1的选取值来决定下拉列表2的显示值 因为2者都是从数据库中读取数据 所以我想的例子简单归纳如下：<select id='s1'>                   <!--下拉列表1-->
<option value='1'>1</option>
<option value='2'>2/option>
<option value='3'>3/option>
</select>
<select id='s2'>                              <!--下拉列表2 -->
<option name='1' value='11'>11</option>
<option name='1' value='111'>111</option>
<option name='1' value='1111'>1111</option><option name='2' value='22'>22</option>
<option name='2' value='222'>222</option>
<option name='2' value='2222'>2222</option><option name='3' value='33'>33</option>
<option name='3' value='333'>333</option>
<option name='3' value='3333'>3333</option>
</select>现在我想做的是 当列表1选择的值为1时候 就显示列表2 name='1'的选项 其余的就不显示， 当列表1选择的值为2时候 就显示列表2 name='2'的选项 其余的就不显示   如此类推。
望各位前辈们指教~~~ 

Answer 1

<script language="javascript"> 
    var s2value=[];
    var s2text=[];
    var s2name=[];
    function saves2(){
        var s2=document.getElementById("s2");
        var opLen=s2.options.length;
        for(var i=0;i<opLen;i++){
            s2value[i]=s2.options[i].value;
            s2text[i]=s2.options[i].text;
            s2name[i]=s2.options[i].name;
        }
    }
    window.onload=function(){
        saves2();
        document.getElementById("s1").onchange=function(){
            var val=[];
            var text=[];
            var s2sel=this.value;
            var opLen=s2value.length;
            for(var i=0;i<opLen;i++){
                if(s2name[i]==s2sel){
                    val[val.length]=s2value[i]
                    text[text.length]=s2text[i];
                }
            }
            var s2=document.getElementById("s2");
            s2.options.length=0;
            for(var j=0;j<val.length;j++){
                s2.options[j]=new Option(text[j],val[j]);
            }
        }
    }</script> <select id='s1'>                  <!--下拉列表1-->
    <option value='1'>1 </option>
    <option value='2'>2</option>
    <option value='3'>3</option>
</select>
<select id='s2'>                              <!--下拉列表2 -->
    <option name='1' value='11'>11 </option>
    <option name='1' value='111'>111 </option>
    <option name='1' value='1111'>1111 </option>    <option name='2' value='22'>22 </option>
    <option name='2' value='222'>222 </option>
    <option name='2' value='2222'>2222 </option>    <option name='3' value='33'>33 </option>
    <option name='3' value='333'>333 </option>
    <option name='3' value='3333'>3333 </option>
</select> 

Answer 2

<script language="javascript">
var a = [];
a[0] = [[11,11],[111,111,],[1111,1111]];
a[1] = [[22,22],[222,222],[22222,2222]];
a[2] = [[33,33],[333,333],[3333,3333]];function change(sel){
var n = sel.selectedIndex;
var sel2 = document.forms[0].s2;
var m = sel2.options.length;
for(var i=0;i<m;i++) sel2.options.remove(0);
for(var i=0;i<a[n].length;i++){
    sel2.options.add(new Option(a[n][i][0],a[n][i][1]));
}
}
</script> 
<form>
<select id='s1' name="s1" onchange="change(this)">
<option value='1'>1</option> 
<option value='2'>2</option> 
<option value='3'>3</option> 
</select> <select id='s2' name="s2">
<option value='11'>11</option> 
<option value='111'>111</option> 
<option value='1111'>1111</option> 
</select> 
</form>