selected部分操作②

最新推荐文章于 2024-02-28 13:12:18 发布
大脚印
最新推荐文章于 2024-02-28 13:12:18 发布
阅读量566
点赞数
分类专栏： JSP 文章标签： select
本文链接：https://blog.csdn.net/u012487658/article/details/22790735
版权
JSP 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
左边选择 然后点增加 就到右边了 可以选择多个
我自己写的：
<body>
 <script type="text/javascript">
      //获取左边选择的;
      function getLeftSelectOpt(left,right,selectType){
       var leftSelectObj = document.getElementById(left);
       var rightSelectObj = document.getElementById(right);
      if(selectType!=null && selectType=='allOption'){
        selectAllOption(left,right);
       }else{
        for(var i = 0;i<leftSelectObj.length;i++){
         //获取选中的;
         if(leftSelectObj.options[i].selected){
          //option中，第一个参数,是显示的名称，第二个是value;
          var op=new Option(leftSelectObj[i].innerHTML,leftSelectObj[i].value);
          rightSelectObj.options.add(op);
          leftSelectObj.options.remove(i);
           i=i-1 ;
  ***这里必须写上  i=i-1 ; 否则选中多条的情况下最后一条 总是添加不到右边  猜测：i保留 但所有的options的下标向前移了一位 导致下一轮循环的时候 直接跳过
     连续选中记录的下一条记录
         }
        }
       } 
      }
      
      //选择所有;
      function selectAllOption(left,right){
       var leftSelectOption = document.getElementById(left);
       var rightSelectOption =  document.getElementById(right);
       
       for(var i = 0;i<leftSelectOption.options.length;i++){
               var op=new Option(leftSelectOption[i].innerHTML,leftSelectOption[i].value);
        rightSelectOption.options.add(op);
       }
       //清空左边select所有option;
       leftSelectOption.options.length = 0;
      }
    
      function add(){
      //自动将右边的option全部选中
        var rightOp=document.getElementById("rightSelectId");
        for (var i = 0; i < rightOp.options.length; i++) {
             rightOp.options[i].selected = true;
    
         }
        document.getElementById("addForm").action="/";
        document.getElementById("addForm").submit();
      }
      
      function returnBack(){
        document.getElementById("addForm").action="/";
        document.getElementById("addForm").submit();
      }
     </script>
     
     <style type="text/css">
      .btn{
       border:1px solid blue;
       background-color:Silver;
       width:100px;
      }
      
     </style>
 <form action="" method="post" name="addForm">
        <center>
       
        <div style="float: inherit;width: 700px;border:0px solid red;" >
                     
        <span style="float: left;width:150px;text-align: left;position:relative;margin-top:20px;">
        <select id="selectId" name="左边select的name"  multiple="multiple" style="overflow:visible;width: 150px;height: 300px;text-align: left">
                       
                           <c:forEach items="${xxx}" var="p">   
                               <option  value='<c:out value="${xxx}"/>'>
                               <c:out value="${xxx}" />
                               </option>
                           </c:forEach>
       </select>
      </span> 
       
       <!-- 按钮; -->
       <span style="float: left;width:150px;text-align: center;position:relative;margin-top:20px;">
        <br/>
        <input class="btn" type="button" value=">" style="0px solid blue" onclick="getLeftSelectOpt('左边select的name','右边select的name','sigleOption')">
        <br/><br/>
        <input class="btn" type="button" value=">>" style="0px solid blue" onclick="getLeftSelectOpt('左边select的name','右边select的name','allOption')"> 
        <br/><br/>
        <input class="btn" type="button" value="&lt;" style="0px solid blue" onclick="getLeftSelectOpt('右边select的name','左边select的name','sigleOption')">
        <br/><br/>
        <input class="btn" type="button" value="&lt;&lt;" style="0px solid blue" onclick="getLeftSelectOpt('右边select的name','左边select的name','allOption')">
       </span>
       
        <span style="float: left;width:150px;text-align: left;position:relative;margin-top:20px;">

              <select id="rightSelectId" name="右边select的name" multiple="multiple" style="overflow:visible;width: 150px;height: 300px;">
             <c:forEach items="${xxx}" var="b">   
                   <option  value='<c:out value="${xxx}"/>'>
                        <c:out value="${xxx}" />
                   </option>
             </c:forEach>

         </select>
        </span>
        
       </div>
       </center>
      </form>
     
      <input type="button" value="提交" onclick="add();">
      <input type="button" value="返回" onclick="returnBack();">
      
 </body>
 
    
 
 
  下面的是在网上 找到的别人的： 
 
 
  < 
  html 
  >  
 
 
  < 
  head 
  >  
 
 
  < 
  meta  
  http-equiv 
  = 
  "Content-Type"  
  content 
  = 
  "text/html; charset=gb2312" 
  >  
 
 
  < 
  script  
  language 
  = 
  "javascript" 
  >  
 
 
  <!--  
 
 
  function moveOption(e1,e2)  
 
 
  {  
 
 
     
  try  
 
 
     
  {  
 
 
       
  for(var i=0;i<e1.options.length;i++)  
 
 
       
  {  
 
 
         
  if(e1.options[i].selected)  
 
 
         
  {  
 
 
           
  var e = e1.options[i];  
 
 
           
  e2.options.add(new Option(e.text, e.value));  
 
 
           
  e1.remove(i);  
 
 
           
  i=i-1  
 
 
         
  }  
 
 
       
  }  
 
 
       
  document.getElementById('city').value=getvalue(document.getElementById('list2'));  
 
 
     
  }  
 
 
     
  catch(e){}  
 
 
  }  
 
 
  function getvalue(geto)  
 
 
  {  
 
 
     
  var allvalue = "";  
 
 
     
  for(var i=0;i<geto.options.length;i++)  
 
 
     
  {  
 
 
       
  allvalue +=geto.options[i].value + ",";  
 
 
     
  }  
 
 
     
  return allvalue;  
 
 
  }  
 
 
  //--> 
 
 
  </ 
  script 
  >  
 
 
  </ 
  head 
  >  
 
 
  < 
  body 
  >  
 
 
  < 
  form  
  id 
  = 
  "myform"  
  name 
  = 
  "myform"  
  method 
  = 
  "post" 
  >  
 
 
     
  < 
  table  
  align 
  = 
  "center"  
  width 
  = 
  "180"  
  border 
  = 
  "0" 
  >  
 
 
       
  < 
  tr 
  >  
 
 
         
  < 
  td  
  width 
  = 
  "80"  
  align 
  = 
  "center" 
  >  
 
 
           
  < 
  select  
  style 
  = 
  "width:100%"  
  multiple  
  id 
  = 
  "list1"  
  name 
  = 
  "list1"  
  size 
  = 
  "6"  
  ondblclick 
  = 
  "moveOption(this, document.getElementById('list2'))" 
  >  
 
 
             
  < 
  option  
  value 
  = 
  "北京" 
  >北京</ 
  option 
  >  
 
 
             
  < 
  option  
  value 
  = 
  "上海" 
  >上海</ 
  option 
  >  
 
 
             
  < 
  option  
  value 
  = 
  "重庆" 
  >重庆</ 
  option 
  >  
 
 
             
  < 
  option  
  value 
  = 
  "天津" 
  >天津</ 
  option 
  >  
 
 
             
  < 
  option  
  value 
  = 
  "陕西" 
  >陕西</ 
  option 
  >  
 
 
           
  </ 
  select 
  >  
 
 
         
  </ 
  td 
  >  
 
 
         
  < 
  td  
  width 
  = 
  "20"  
  align 
  = 
  "center" 
  >  
 
 
           
  < 
  input  
  type 
  = 
  "button"  
  value 
  = 
  "添加"  
  onclick 
  = 
  "moveOption(document.getElementById('list1'), document.getElementById('list2'))" 
  >< 
  br 
  >< 
  br 
  >  
 
 
           
  < 
  input  
  type 
  = 
  "button"  
  value 
  = 
  "删除"  
  onclick 
  = 
  "moveOption(document.getElementById('list2'), document.getElementById('list1'))" 
  >  
 
 
         
  </ 
  td 
  >  
 
 
         
  < 
  td  
  width 
  = 
  "80"  
  align 
  = 
  "center" 
  >  
 
 
           
  < 
  select  
  style 
  = 
  "width:100%"  
  multiple  
  id 
  = 
  "list2"  
  name 
  = 
  "list2"  
  size 
  = 
  "6"  
  ondblclick 
  = 
  "moveOption(this, document.getElementById('list1'))" 
  >  
 
 
           
  </ 
  select 
  >  
 
 
         
  </ 
  td 
  >  
 
 
       
  </ 
  tr 
  >  
 
 
     
  </ 
  table 
  >  
 
 
     
  < 
  div  
  align 
  = 
  "center" 
  >< 
  input  
  type 
  = 
  "text"  
  id 
  = 
  "city"  
  name 
  = 
  "city"  
  size 
  = 
  "23"  
  /></ 
  div 
  >  
 
 
  </ 
  form 
  >  
 
 
  </ 
  body 
  >  
 
 
  </ 
  html 
  > 
 
大脚印
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
selected部分操作②

左边选择然后点增加就到右边了可以选择多个我自己写的： //获取左边选择的; function getLeftSelectOpt(left,right,selectType){ var leftSelectObj = document.getElementById(left); var rightSelectObj = docum
复制链接

扫一扫