您的位置：首页 > Web前端 > JavaScript

JS select菜单动态选择练习

2018-01-08 22:14 417 查看

运行结果如下

选择任意两门课程，点击【>】按钮

代码如下，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="05select.js"></script>
<style>
select {width: 120px}

</style>
<script>
window.onload=function(){
var left=document.getElementById("left");
var right=document.getElementById("right");
var tr=document.getElementById("tr");
var tl=document.getElementById("tl");
tr.onclick=function(){
if(left.selectedIndex<0){
alert("请选择课程");
}else{
var options=left.options;
console.log(options);
for(var i=options.length-1;i>=0;i--){
var option=options[i];
if(options[i].selected){
left.remove(i);
right.add(option);
}
}
}
}
tl.onclick=function(){
if(right.selectedIndex<0){
alert("请选择课程");
}else{
var options=right.options;
for(var i=options.length-1;i>=0;i--){
var option=options[i];
if(options[i].selected){
right.remove(i);
left.add(option);
}
}
}
}
}
</script>
</head>
<body>
<form action="" id="form">
<table>
<tr>
<td>可选课程：<br>
<select size='6' multiple name="left" id="left">
<option value="WEB">WEB</option>
<option value="Android">Android</option>
<option value="Javascript">Javascript</option>
<option value="混合式开发">混合式开发</option>
<option value="架构">架构</option>
</select>
</td>
<td>
<input type="button" value=">" name="tr" id="tr"><br>
<input type="button" value="<" name="tl" id="tl"><br>
</td>
<td>已选课程：<br>
<select name="right" id="right" size="6" multiple="">
<option value="人机交互">人机交互</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航