组合列表框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合列表框</title>
<script language="javascript" type="text/javascript">
   // 对下拉框信息进行初始化
   function init(){
      var options = new Array(10);//初始化十个选项
      for(i = 0;i<10;i++)
      {
          options[i] = "选项"+(i+1);
      }
      s1.length=10;
      for(i = 0;i<10;i++)
      {
          s1.options[i].value=i+1;
          s1.options[i].text=options[i];
      }
   }

   // 把选中的选项移动到右边
   function move(s1,s2){
      // 判断是否有选择项
      index = s1.selectedIndex
      if(index==-1)
         alert("没有选择");
      else{
      // 修改s2，把s1中选中的选项添加到s2中
      s2.length++;
      s2.options[s2.length-1].value = s1.options[index].value;
      s2.options[s2.length-1].text= s1.options[index].text;

      // 删除s1中被选择的选项
      s1.remove(index);
      }
   }

   // 把所有选项移动到右边
   function moveAll(s1,s2){
      // 判断是否有选择项
      if(s1.length == 0){
         alert("没有可用选择");
      }

      // 把s1中的选项添加到s2中
      s2.length = s1.length + s2.length;
      for(i=0;i<s1.length;i++){
         s2.options[s2.length-s1.length+i].value=s1.options[i].value;
         s2.options[s2.length-s1.length+i].text=s1.options[i].text;
      }

      // 清空s1
      s1.length = 0;
   }
</script>
<style type="text/css">
   input {width =40}
</style>
</head>
<body onload="init()">
       <table>
           <tr>
              <td>
                  <select name="s1" size=10 style="width:100">
                  </select>
              </td>
              <td>
                  <input type="button" name="moveToRight" value=">" style="width:50px" onClick="move(s1,s2)">
                  <br>
                  <input type="button" name="moveAllToRight" value=">>" style="width:50px" onClick="moveAll(s1,s2)">
                  <br>
                  <input type="button" name="moveToLeft" value="<" style="width:50px" onClick="move(s2,s1)">
                  <br>
                  <input type="button" name="moveAllToLeft" value="<<" style="width:50px" onClick="moveAll(s2,s1)">
                  <br>
              </td>
              <td>
                  <select name="s2" size=10 style="width: 100">
                  </select>
              </td>
           </tr>
       </table>
    </body>
</html>

猜你喜欢