這幾天剛掌握的內部插入，做了個簡易的選課系統分享下 <body> <h1>系統選課</h1> <div id="da"> <div id="div1"> 可選課程 </div> <div id="div2"> </div> <div id="div3"> 已選課程 </div> </div> <di
這幾天剛掌握的內部插入，做了個簡易的選課系統分享下
<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>
