这几天刚掌握的内部插入，做了个简易的选课系统分享下
<body>
<h1>系统选课</h1>
<div id="da">
<div id="div1">
可选课程
</div>
<div id="div2">
</div>
<div id="div3">
已选课程
</div>
</div>
<div id="da1">
<div id="div4">
<select id="zuo" size="10">
<option>大学物理</option>
<option>阿斯蒂芬</option>
<option>规范大哥</option>
<option>有人发帖</option>
<option>提建议就</option>
<option>骬的说法</option>
<option>风格仍然</option>
<option>热也容易</option>
<option>刚发的广</option>
<option>而突然他</option>
<option>屠应埈</option>
<option>UI</option>
<option>根深蒂固</option>
</select>
</div>
<div id="div5">
<button>选择</button><br>
<button>全选</button><br>
<button>退选</button><br>
<button>全退</button><br>
<button>上移</button><br>
<button>下移</button><br>
<button>置顶</button><br>
<button>置底</button>
</div>
<div id="div6">
<select id="you" size="10">
</select>
</div>
</div>
<button id="tj">提交</button>
</body>
<style>
#da{
width:242px;
height:20px;
}
#div1{
width:100px;
height:20px;
border:1px solid;
}
#div2{
width:46px;
height:20px;
border:1px solid;
float:right;
margin-top:-22px;
margin-right:90px;
}
#div3{
width:100px;
height:20px;
border:1px solid;
foat:right;
margin-top:-22px;
margin-right:-14px;
}
#da1{
width:242px;
height:200px;
}
#div4{
width:100px;
height:208px;
border:1px solid;
float:left;
margin-top:2px;
}
#zuo{
width:100px;
height:208px;
}
#you{
width:100px;
height:208px;
}
#div5{
width:46px;
height:208px;
border:1px solid;
float:right;
margin-top:2px;
margin-right:90px;
}
#div5 button{
width:48px;
background-color:pink;
}
#div6{
width:100px;
height:208px;
border:1px solid;
float:right;
margin-right:-14px;
margin-top:-210px;
}
</style>
<script>
$(function(){
//选择 把zuo里面选中的option移动到you里面
$("#div5>button:eq(0)").click(function(){
$("#you").prepend($("#zuo>option:selected"));
})
//全选 把zuo里面所有的都移动到you
$("#div5>button:eq(1)").click(function(){
$("#you").prepend($("#zuo>option"));
})
//退选 把you里面背选都移动到zuo
$("#div5>button:eq(2)").click(function(){
$("#zuo").prepend($("#you>option:selected"));
})
//全退 把you里面所有的都移动到zuo
$("#div5>button:eq(3)").click(function(){
;
$("#zuo").prepend($("#you>option"));
})
//上移 先找到被选中的上一个，让他的上一个的前面加入自己
$("#div5>button:eq(4)").click(function(){
$("#zuo>option:selected").prev().before($("#zuo>option:selected"));
})
//下移
$("#div5>button:eq(5)").click(function(){
$("#zuo>option:selected").next().after($("#zuo>option:selected"));
})
//置顶
$("#div5>button:eq(6)").click(function(){
$("#zuo>option:first").before($("#zuo>option:selected"));
})
//置底
$("#div5>button:eq(7)").click(function(){
$("#zuo>option:last").after($("#zuo>option:selected"));
})
//提交
$("#tj").click(function(){
var m=$("#you").children().length;
if(m==0){
alert("请先选择课程然后提交")
}else{
var tt=confirm("你确定提交吗");
if(tt){
alert("提成功")
}else{
alert("你取消了提交")
}
}
});
});
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
