JAVASCRIPT 实现增加和删除Select元素

ゝ一纸荒年。 2022-05-21 09:17 259阅读 0赞
  1. <script type="text/javascript">
  2. //清除选择选项
  3. function cleanValue(cleanSelect,descSelect,isRemove){
  4. var srcSel= document.getElementById(cleanSelect);
  5. var descSel=document.getElementById(descSelect);
  6. var count=srcSel.length;
  7. for(var i=0;i<count;i++){
  8. if(srcSel.options[i].selected){
  9. if(isRemove){
  10. var isExists=false;
  11. for(var j=0;j<descSel.length;j++){
  12. if(parseInt(descSel.options[j].value)==parseInt(srcSel.options[i].value)){
  13. isExists=true;
  14. break;
  15. }
  16. }
  17. if(!isExists){
  18. descSel.options[descSel.length]= new Option(srcSel.options[i].text,srcSel.options[i].value);
  19. }
  20. }
  21. srcSel.remove(srcSel.selectedIndex);
  22. i--;
  23. count--;
  24. }
  25. }
  26. }
  27. //添加选项
  28. function addSelect(srcSelect,descSelect,isRemove){
  29. var srcSel = document.getElementById(srcSelect);
  30. var descSel = document.getElementById(descSelect);
  31. var count=srcSel.length;
  32. for( var i=0;i<count;i++){
  33. if(srcSel.options[i].selected){
  34. descSel.options[descSel.length]= new Option(srcSel.options[i].text,srcSel.options[i].value);
  35. if(isRemove){
  36. srcSel.remove(srcSel.selectedIndex);
  37. count--;
  38. i--;
  39. }
  40. }
  41. }
  42. }
  43. function getSelectAllValue(srcSelect,descSelect){
  44. var srcSel = document.getElementById(srcSelect);
  45. var pv=document.getElementById(descSelect);
  46. var value="";
  47. for( var i=0;i<srcSel.length;i++){
  48. value+=srcSel.options[i].value+",";
  49. }
  50. if(value.length>0){
  51. pv.value=value.substring(0,value.length-1);
  52. }
  53. }
  54. </script>
  55. <tr bgcolor="#FFFFFF">
  56. <td>奖品池:</td>
  57. <td>
  58. <select id="awardList" name="awardList" size="5" style="width: 156px">
  59. <c:forEach var="award" items="${awardList}">
  60. <option value="${award.id }">${award.award_name }</option>
  61. </c:forEach>
  62. </select>
  63. </td>
  64. <td>
  65. <b style="text-align: center;">添加奖品</b>
  66. <ol>
  67. <li><a href="javascript:void(0);" οnclick="addSelect('awardList','addAwardList',false)">拷贝></a></li>
  68. <li><a href="javascript:void(0);" οnclick="addSelect('awardList','addAwardList',true)">移>></a></li>
  69. <li><a href="javascript:void(0);" οnclick="cleanValue('addAwardList','awardList',false)"> 删除右 </a></li>
  70. <li><a href="javascript:void(0);" οnclick="cleanValue('addAwardList','awardList',true)"> <<移 </a></li>
  71. </ol>
  72. </td>
  73. <td>
  74. <select id="addAwardList" name="addAwardList" size="5" style="width: 156px">
  75. </select>
  76. </td>
  77. </tr>

发表评论

表情:
评论列表 (有 0 条评论,259人围观)

还没有评论,来说两句吧...

相关阅读