首页 > 代码库 > 利用javascript实现课程选择
利用javascript实现课程选择
最终实现的效果如下图所示：
代码如下所示：
HTML代码部分：
1 <body> 2 <div class="page" style="overflow: hidden"> 3 <div class="one">所选课程 4 <select size =10 name="" id="left"> 5 <option value="">javascript</option> 6 <option value="">html5</option> 7 <option value="">css3</option> 8 <option value="">jquery</option> 9 <option value="">angular</option>10 <option value="">javascript</option>11 <option value="">html5</option>12 <option value="">css3</option>13 <option value="">jquery</option>14 <option value="">angular</option>15 <option value="">javascript</option>16 <option value="">html5</option>17 <option value="">css3</option>18 <option value="">jquery</option>19 <option value="">angular</option>20 <option value="">javascript</option>21 <option value="">html5</option>22 <option value="">css3</option>23 <option value="">jquery</option>24 <option value="">angular</option>25 </select>26 </div>27 <div class="one"><br><br>28 <button id="rightBtn">右移一项</button>29 <button id="allRightBtn">全部右移</button>30 <button id="leftBtn">左移一项</button>31 <button id="allLeftBtn">全部左移</button>32 </div>33 <div class="one">34 <select size =10 name="" id="right">35 <option value="">web</option>36 <option value="">前端</option>37 <option value="">后端</option>38 <option value="">java</option>39 </select>40 </div>41 </div>42 </body>
CSS代码部分：
1 <style> 2 select{ 3 width: 200px; 4 5 } 6 .one{ 7 float: left; 8 } 9 button{10 display: block;11 }12 </style>
Javascript代码部分：
1 <script> 2 var left = document.getElementById("left"); 3 var right = document.getElementById("right"); 4 var rightBtn = document.getElementById("rightBtn"); 5 var leftBtn = document.getElementById("leftBtn"); 6 var allRightBtn = document.getElementById("allRightBtn"); 7 var allLeftBtn = document.getElementById("allLeftBtn"); 8 rightBtn.onclick = function(){ 9 right.appendChild(left[left.selectedIndex])10 };11 12 allRightBtn.onclick = function(){13 var len = left.length;14 for(var i= 0;i<len;++i){15 right.appendChild(left[0])16 }17 };18 19 leftBtn.onclick = function(){20 left.appendChild(right[right.selectedIndex])21 };22 23 allLeftBtn.onclick = function(){24 var len = right.length;25 for(var i= 0;i<len;++i){26 left.appendChild(right[0])27 }28 }29 30 </script>
供友友们参考。
利用javascript实现课程选择
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。