`
xrqsjj
  • 浏览: 21166 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

js select

JavaScriptJ#HTML 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Select下拉列表框进行多选、移除、交换内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="font-size:12px">

<script   language=javascript>  
  function   selectMove(oSource,oTarget,cWhich)     //两个选择框选项之间的移动，oSource为源选择框，oTarget为目标选择框，cWhich为提示文字，取值”左“或”右“。  
  {  
      if(!oSource.options.length)  
      {  
          alert(cWhich+"侧列表中已没有选项可选，无法移动！");  
          return;  
      }  
      if(oSource.selectedIndex==-1)  
      {  
          alert("操作前您首先应该从"+cWhich+"侧列表中选择一项！");  
          return;  
      }  
      var   mySld=new   Array();  
      for(i=0;i<oSource.options.length;i++)  
          if(oSource.options[i].selected)  
              mySld[mySld.length++]=i;  
      for(i=0;i<mySld.length;i++)  
      {  
          oTarget.options.length++;  
          oTarget.options[oTarget.options.length-1].text=oSource.options[mySld[i]].text;  
          oTarget.options[oTarget.options.length-1].value=oSource.options[mySld[i]].value;  
      }  
      for(i=0;i<mySld.length;i++)  
      {  
          for(j=mySld[i]-i;j<oSource.options.length-1;j++)  
          {  
              oSource.options[j].text=oSource.options[j+1].text;  
              oSource.options[j].value=oSource.options[j+1].value;  
          }  
          oSource.options.length--;  
      }  
  }  
   
  function   moveAll(oSource,oTarget)  
  {  
      var   n=oTarget.options.length;  
      oTarget.options.length=n+oSource.options.length;  
      for(i=n;i<oTarget.options.length;i++)  
      {  
          oTarget.options[i].text=oSource.options[i-n].text;  
          oTarget.options[i].value=oSource.options[i-n].text.value;  
      }  
      oSource.options.length=0;  
  }  
  </script>  
   
  <form   name=form1>  
  <table   class=setrole_tab>  
      <tr>  
          <td>  
              未加入角色<br>  
              <select   size=15   style="width:150px;"   name=notadded_role   ondblclick="selectMove(document.form1.notadded_role,document.form1.added_role,'左')"   multiple>  
                  <option>aaaaaaaa</option>  
                  <option>bbbbbbbb</option>  
                  <option>cccccccc</option>  
                  <option>dddddddd</option>  
              </select>  
          </td>  
          <td>  
              <a   href="javascript:moveAll(document.form1.notadded_role,document.form1.added_role);">全部右移</a><br>  
              <a   href="javascript:selectMove(document.form1.notadded_role,document.form1.added_role,'左')">右移</a><br>  
              <a   href="javascript:selectMove(document.form1.added_role,document.form1.notadded_role,'右')">左移</a><br>  
              <a   href="javascript:moveAll(document.form1.added_role,document.form1.notadded_role);">全部左移</a>  
          </td>  
          <td>  
              已加入角色<br>  
              <select   size=15   style="width:150px;"   name=added_role   ondblclick="selectMove(document.form1.added_role,document.form1.notadded_role,'右')"   multiple>  
              
              </select>  
          </td>  
      </tr>  
  </table>  
  </form>  

</body>
</html>

分享到：
| jquery select
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics