你的位置:首页 > Java教程

[Java教程]简易版的选课系统


这几天刚掌握的内部插入,做了个简易的选课系统分享下

<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>