请教option选值

例：
<select name=s1>
<option value="老师">老师</option>
<option value="学生">学生</option>
<option value="职工">职工</option>
</select><select name=s2>
<option value="">...</option>
<option value="">...</option>
<option value="5">a</option>  
<option value="">...</option>
</select>第二个SELECT菜单中肯定有个（option之间的值是“a”，但option.value=多少，不知道）要求：当s1的值为‘学生’的被选上后，s2.option之间的text为‘a'的这个也应该被选上请教，怎么写

解决方案 »

  1.   

    简单写了下(IE下，其他浏览器要修改下)：<script>

    var $ = function(id){return document.getElementById(id);};

    window.onload=function()
    {
      $("s1").attachEvent("onchange",function(obj){
     
      if(obj.srcElement.value=="学生")
      {
         var len = $("s2").options.length;
         for(i=0;i<len;i++)
         {
            if($("s2").options[i].text=="a")
            {
              $("s2").options[i].selected=true;
              break;
            }
         }
      }else
      {
      $("s2").value="";
      }
       
      });

    }

    </script><select name=s1>
    <option value="老师">老师</option>
    <option value="学生">学生</option>
    <option value="职工">职工</option>
    </select><select name=s2>
    <option value="">...</option>
    <option value="">...</option>
    <option value="5">a</option>   
    <option value="">...</option>
    </select>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function sel(){
       var s1=document.getElementById("s1");
       var s2=document.getElementById("s2");
       s1.onchange=function(){
          if(this.options[this.selectedIndex].value=="学生"){
         for(var i=0,len=s2.options.length;i<len;i++){
         if(s2.options[i].text=="a"){
        s2.options[i].selected=true;
    break;
     }
     }
      }
       }
    }
    window.onload=sel;
    </script>
    </head><body>
    <select name="s1" id="s1">
    <option value="老师">老师</option>
    <option value="学生">学生</option>
    <option value="职工">职工</option>
    </select><select name="s2" id="s2">
    <option value="">...</option>
    <option value="">...</option>
    <option value="5">a</option>  
    <option value="">...</option>
    </select>
    </body>
    </html>
      

  3.   

    加多个else
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function sel(){
       var s1=document.getElementById("s1");
       var s2=document.getElementById("s2");
       s1.onchange=function(){
          if(this.options[this.selectedIndex].value=="学生"){
         for(var i=0,len=s2.options.length;i<len;i++){
         if(s2.options[i].text=="a"){
        s2.options[i].selected=true;
    break;
     }
     }
      }
      else{
          s2.value="";
      }
       }
    }
    window.onload=sel;
    </script>
    </head><body>
    <select name="s1" id="s1">
    <option value="老师">老师</option>
    <option value="学生">学生</option>
    <option value="职工">职工</option>
    </select><select name="s2" id="s2">
    <option value="">...</option>
    <option value="">...</option>
    <option value="5">a</option>  
    <option value="">...</option>
    </select>
    </body>
    </html>
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    <div>
    <select name="s1" onchange="change();">
    <option value="老师">老师</option>
    <option value="学生">学生</option>
    <option value="职工">职工</option>
    </select>
    <select name="s2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="5">a</option>
    <option value="4">4</option>
    </select>
    </div>
    </body><script type="text/javascript" language="javascript">
    function change(){
    if(document.getElementsByName("s1")[0].selectedIndex == 1) {
    document.getElementsByName("s2")[0].options[2].selected = true;
    }
    }
    </script></html>
      

  5.   

    还有点疑问：
    页面在打开时，S1选的就是‘学生’，能不能s2.options[i].selected=true;也在页面打开时就这样被选上
      

  6.   

    这样
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function sel(){
       var s1=document.getElementById("s1");
       var s2=document.getElementById("s2");
       s1.onchange=aa;
       function aa(){
          if(s1.options[s1.selectedIndex].value=="学生"){
         for(var i=0,len=s2.options.length;i<len;i++){
         if(s2.options[i].text=="a"){
        s2.options[i].selected=true;
    break;
     }
     }
      }
      else{
          s2.value="";
      }
       }
       aa();
    }
    window.onload=sel;
    </script>
    </head><body>
    <select name="s1" id="s1">
    <option value="学生">学生</option>
    <option value="老师">老师</option>
    <option value="职工">职工</option>
    </select><select name="s2" id="s2">
    <option value="">...</option>
    <option value="">...</option>
    <option value="5">a</option>  
    <option value="">...</option>
    </select>
    </body>
    </html>