select 事件问题

<TABLE id="dataTable" cellSpacing="1" cellPadding="4" width="100%"border="0">
<tr>
<td width="33%" align="center">
<TABLE cellSpacing="1" cellPadding="4" width="33%" border="0" align="right">
<tr>
<td>所有部门：</td>
</tr>
<tr>
<td colspan="15">
<select size="15" style="width: 190px">
<option value="1">软件部</option>
<option value="2">人力部</option>
</select>
</td>
</tr>
</table>
</td>
<td width="10%" align="center">
<TABLE cellSpacing="1" cellPadding="4" width="10%" border="0">
<tr>
<td colspan="5" width="10%"></td>
</tr>
<tr>
<td width="10%">
<input type="button" class="input-button" value="    <<    ">
</td>
</tr>
<tr>
<td colspan="3" width="10%"></td>
</tr>
<tr>
<td width="10%">
<input type="button" class="input-button" value="    >>    ">
</td>
</tr>
<tr>
<td colspan="5" width="10%">
</td>
</tr>
</TABLE>
</td>
<td width="33%" align="center">
<TABLE cellSpacing="1" cellPadding="4" width="33%" border="0" align="left">
<tr>
<td>已有部门：</td>
</tr>
<tr>
<td colspan="15" width="33%">
<select size="15" style="width: 190px">
<option value="1">销售部</option>
</select>
</td>
</tr>
</TABLE>
</td>
</tr>
</TABLE>按钮事件怎么写啊，还有就是怎么获得select的所有value值啊

解决方案 »

  1.   

    <select name="opt" onchange="test()">    
    <option value="1">111    
    <option value="2">222    
    <option value="3">333    
    <option value="4">444    
    <option value="5">555    
    <option value="6">666    
    <option value="7">777    
    </select>    
      
    <SCRIPT LANGUAGE="JavaScript">  
    <!--   
    function test(){   
        alert(document.all.opt.options[document.all.opt.selectedIndex].innerText);   
        alert(document.all.opt.options[document.all.opt.selectedIndex].value );   
        }   
    //-->  
    </SCRIPT> 
      

  2.   


    <!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">   
      <HTML>   
      <HEAD>   
      <TITLE>   New   Document   </TITLE>   
      <META   NAME="Generator"   CONTENT="EditPlus">   
      <META   NAME="Author"   CONTENT="">   
      <META   NAME="Keywords"   CONTENT="">   
      <META   NAME="Description"   CONTENT="">   
      <script>   
        
      function   check()   
      {   
      var   str="";   
      l=document.frm.x.options.length;   
      for(var   i=0;i<l;i++)   
      {   
      str=str+document.frm.x.options[i].value;   
      }   
      location.href="1.html?str="+str;   
      }   
      </script>   
      </HEAD>   
        
      <BODY>   
      <form   action="1.html"   name="frm"   method="get">   
      <select   name="x">   
      <option   value=a>a</option>   
      <option   value=b>b</option>   
      <option   value=c>c</option>   
      <input   type="button"   value="ldlksdf"   onclick="check();">   
      </select>   
      </form>   
        
      </BODY>   
      </HTML> 
      

  3.   


     <script type="text/javascript">
      function move(){
    var obj=document.getElementById('selectAll');
    var index=obj.selectedIndex; //序号，取当前选中选项的序号
    var val = obj.options[index].value;
    var txt = obj.options[index].text;
     var obj=document.getElementById('selected');  
     
        obj.options.add(new Option(txt,val)); //这个兼容IE与firefox
      }
      </script>obj.options.length长度知道
    循环就可以了
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script type="text/javascript">
      function move(){
    var obj=document.getElementById('selectAll');
    var index=obj.selectedIndex; //序号，取当前选中选项的序号
    var val = obj.options[index].value;
    var txt = obj.options[index].text;
     var obj=document.getElementById('selected');  
     
        obj.options.add(new Option(txt,val)); //这个兼容IE与firefox
      }
      </script>
     </HEAD> <BODY>
      <TABLE id="dataTable" cellSpacing="1" cellPadding="4" width="100%"border="0"> 
    <tr> 
    <td width="33%" align="center"> 
    <TABLE cellSpacing="1" cellPadding="4" width="33%" border="0" align="right"> 
    <tr> 
    <td>所有部门： </td> 
    </tr> 
    <tr> 
    <td colspan="15"> 
    <select size="15" style="width: 190px" id="selectAll"> 
    <option value="1">软件部 </option> 
    <option value="2">人力部 </option> 
    </select> 
    </td> 
    </tr> 
    </table> 
    </td> 
    <td width="10%" align="center"> 
    <TABLE cellSpacing="1" cellPadding="4" width="10%" border="0"> 
    <tr> 
    <td colspan="5" width="10%"> </td> 
    </tr> 
    <tr> 
    <td width="10%"> 
    <input type="button" class="input-button" value="    < <    "> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="3" width="10%"> </td> 
    </tr> 
    <tr> 
    <td width="10%"> 
    <input type="button" class="input-button" value="    >>    " onclick="move()"> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="5" width="10%"> 
    </td> 
    </tr> 
    </TABLE> 
    </td> 
    <td width="33%" align="center"> 
    <TABLE cellSpacing="1" cellPadding="4" width="33%" border="0" align="left"> 
    <tr> 
    <td>已有部门： </td> 
    </tr> 
    <tr> 
    <td colspan="15" width="33%"> 
    <select size="15" style="width: 190px" id="selected"> 
    <option value="1">销售部 </option> 
    </select> 
    </td> 
    </tr> 
    </TABLE> 
    </td> 
    </tr> 
    </TABLE>  </BODY>
    </HTML>
      

  5.   

    <td width="10%">
    <input type="button" class="input-button" value="    < <    ">
    </td>
    </tr>
    <tr>
    <td colspan="3" width="10%"> </td>
    </tr>
    <tr>
    <td width="10%">
    <input type="button" class="input-button" value="    >>    ">
    </td> 
    这连个按钮事件怎么写啊，就是左移，右移啊
      

  6.   


    <script language = "JavaScript" type="text/javascript">
    function move(src, tar){
       var a = src.options;
       var b = tar.options;
       for(var i=0;i<a.length;i++){
         if(a[i].selected){
          b[b.length] = new Option(a[i].text, a[i].value);
          a.remove(i);
         }
       }
    }
    </script><TABLE id="dataTable" cellSpacing="1" cellPadding="4" width="100%"border="0"> 
    <tr> 
    <td width="33%" align="center"> 
    <TABLE cellSpacing="1" cellPadding="4" width="33%" border="0" align="right"> 
    <tr> 
    <td>所有部门： </td> 
    </tr> 
    <tr> 
    <td colspan="15"> 
    <select size="15" style="width:190px" id="sel1" name="sel1"> 
    <option value="1">软件部 </option> 
    <option value="2">人力部 </option> 
    </select> 
    </td> 
    </tr> 
    </table> 
    </td> 
    <td width="10%" align="center"> 
    <TABLE cellSpacing="1" cellPadding="4" width="10%" border="0"> 
    <tr> 
    <td colspan="5" width="10%"> </td> 
    </tr> 
    <tr> 
    <td width="10%"> 
    <input type="button" class="input-button" value="    < <    " onclick="move(sel2,sel1)"> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="3" width="10%"> </td> 
    </tr> 
    <tr> 
    <td width="10%"> 
    <input type="button" class="input-button" value="    >>    " onclick="move(sel1,sel2)"> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="5" width="10%"> 
    </td> 
    </tr> 
    </TABLE> 
    </td> 
    <td width="33%" align="center"> 
    <TABLE cellSpacing="1" cellPadding="4" width="33%" border="0" align="left"> 
    <tr> 
    <td>已有部门： </td> 
    </tr> 
    <tr> 
    <td colspan="15" width="33%"> 
    <select size="15" style="width: 190px" id="sel2" name="sel2"> 
    <option value="1">销售部 </option> 
    </select> 
    </td> 
    </tr> 
    </TABLE> 
    </td> 
    </tr> 
    </TABLE> 
      

  7.   


    我的测试通过了.... :)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <style type="text/css">
    body, td{font-family:Verdana; font-size:11px; color:#333333; font-weight:bold;}
    a:link,a:visited{font-family:Verdana; font-size:11px; color:#333333; font-weight:bold; padding:0px 3px; line-height:20px; text-decoration:none; border-bottom:1px solid #dddddd;}
    a:hover,a:active{font-family:Verdana; font-size:11px; color:#FF6600; font-weight:bold;}
    span{font-family:Verdana; font-size:11px; color:red; font-weight:bold; padding-left:5px; border-left:1px solid blue; margin:0px 10px;}
    </style>
    <script language="javascript" type="text/javascript">
    function $(id)
    {
    return document.getElementById(id);
    }function trim(str)
    {
    return str.replace(/(^\s*)|(\s*$)/g,"");  
    }function toRight()
    {
    var olf=$("select01");
    var ori=$("select02");
    var txt=trim(olf.options[olf.options.selectedIndex].text);  
    var ind=trim(olf.options[olf.options.selectedIndex].value);  
    var inflag="yes";
    for(var i=0;i<ori.options.length;i++){
    if(txt==trim(ori.options[i].text)){
     inflag="no";break;
    }
    }
    if(inflag=="yes"){
    ori.options.add(new Option(txt,ind));
    olf.options.remove(olf.options.selectedIndex);
    }else{
    alert("该选项已经存在,不需要添加了");
    }
    }function toLeft()
    {
    var olf=$("select01");
    var ori=$("select02");
    var txt=trim(ori.options[ori.options.selectedIndex].text);  
    var ind=trim(ori.options[ori.options.selectedIndex].value);  
    var inflag="yes";
    for(var i=0;i<olf.options.length;i++){
    if(txt==trim(olf.options[i].text)){
     inflag="no";break;
    }
    }
    if(inflag=="yes"){
    olf.options.add(new Option(txt,ind));
    ori.remove(ori.options.selectedIndex);
    }else{
    alert("该选项已经存在，不需要添加了");
    }
    }
    </script>
    <body>
    <TABLE id="dataTable" cellSpacing="1" cellPadding="4" width="100%"border="0"> 
    <tr> 
    <td width="33%" align="center"> 
    <TABLE cellSpacing="1" cellPadding="4" width="33%" border="0" align="right"> 
    <tr> 
    <td>所有部门： </td> 
    </tr> 
    <tr> 
    <td colspan="15"> 
    <select name="select01" size="15" id="select01" style="width: 190px"> 
    <option value="1">软件部 </option> 
    <option value="2">人力部 </option> 
    </select> 
    </td> 
    </tr> 
    </table> 
    </td> 
    <td width="10%" align="center"> 
    <TABLE cellSpacing="1" cellPadding="4" width="10%" border="0"> 
    <tr> 
    <td colspan="5" width="10%"> </td> 
    </tr> 
    <tr> 
    <td width="10%"> 
    <input type="button" class="input-button" value="One >" onClick="javascript:toRight();"> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="3" width="10%"> </td> 
    </tr> 
    <tr> 
    <td width="10%"> 
    <input type="button" class="input-button" value="< One" onclick="javascript:toLeft();"> 
    </td> 
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr> 
    <tr> 
    <td colspan="5" width="10%"> 
    </td> 
    </tr> 
    </TABLE> 
    </td> 
    <td width="33%" align="center"> 
    <TABLE cellSpacing="1" cellPadding="4" width="33%" border="0" align="left"> 
    <tr> 
    <td>已有部门： </td> 
    </tr> 
    <tr> 
    <td colspan="15" width="33%"> 
    <select name="select02" size="15" id="select02" style="width: 190px"> 
    <option value="1">销售部 </option> 
    </select> 
    </td> 
    </tr> 
    </TABLE> 
    </td> 
    </tr> 
    </TABLE> 
    </body>
    </html>
      

  8.   

    获得select的所有value值
    就是document.getElementById(“selectID”).innerText