JAVASCRIPT 实现增加和删除Select元素

最新推荐文章于 2021-03-29 04:37:19 发布

kevin luan

最新推荐文章于 2021-03-29 04:37:19 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/kevin_Luan/article/details/8091133

版权

JAVASCRIPT 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
 //清除选择选项
 function cleanValue(cleanSelect,descSelect,isRemove){
  var srcSel=  document.getElementById(cleanSelect);
  var descSel=document.getElementById(descSelect);
    var count=srcSel.length;
    for(var i=0;i<count;i++){   
  if(srcSel.options[i].selected){
     if(isRemove){
       var isExists=false;
       for(var j=0;j<descSel.length;j++){
        if(parseInt(descSel.options[j].value)==parseInt(srcSel.options[i].value)){
         isExists=true;
         break;
        }
       }
       if(!isExists){
        descSel.options[descSel.length]= new Option(srcSel.options[i].text,srcSel.options[i].value); 
       }
     }
     srcSel.remove(srcSel.selectedIndex);
     i--;
     count--;
  }
 } 
 }

//添加选项
function addSelect(srcSelect,descSelect,isRemove){
 var srcSel = document.getElementById(srcSelect);
 var descSel = document.getElementById(descSelect);
 var count=srcSel.length;
 for( var i=0;i<count;i++){   
  if(srcSel.options[i].selected){
   descSel.options[descSel.length]= new Option(srcSel.options[i].text,srcSel.options[i].value);
   if(isRemove){
       srcSel.remove(srcSel.selectedIndex);
       count--;
       i--;
     }
  }
 }
}

function getSelectAllValue(srcSelect,descSelect){
 var srcSel = document.getElementById(srcSelect);
 var pv=document.getElementById(descSelect);
 var value="";
 for( var i=0;i<srcSel.length;i++){   
  value+=srcSel.options[i].value+",";
 }
 if(value.length>0){
  pv.value=value.substring(0,value.length-1);
 }
}
 </script>

 

 

 

 

<tr bgcolor="#FFFFFF">
   <td>奖品池:</td>
   <td>
    <select id="awardList" name="awardList" size="5" style="width: 156px">
     <c:forEach var="award" items="${awardList}">
      <option value="${award.id }">${award.award_name }</option>
     </c:forEach>
    </select>
   </td>
   <td>
    <b style="text-align: center;">添加奖品</b>
    <ol>
     <li><a href="javascript:void(0);" οnclick="addSelect('awardList','addAwardList',false)">拷贝></a></li>
     <li><a href="javascript:void(0);" οnclick="addSelect('awardList','addAwardList',true)">移>></a></li>
     <li><a href="javascript:void(0);" οnclick="cleanValue('addAwardList','awardList',false)"> 删除右 </a></li>
     <li><a href="javascript:void(0);" οnclick="cleanValue('addAwardList','awardList',true)"> <<移 </a></li>
    </ol>
   </td>
   <td>
    <select id="addAwardList" name="addAwardList" size="5" style="width: 156px">
    </select>
   </td>
  </tr>