练习1

来源：互联网发布：曲靖医专教务网络编辑：程序博客网时间：2024/06/05 15:59

效果图

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
select{
width: 150px;
height: 100px;
}
div{
width: 50px;
display: inline-block;
}
</style>

</head>
<body>

<select name="" id="sel1" size="5" multiple>
<option value="">兰博基尼</option>
<option value="">法拉利</option>
<option value="">迈巴赫</option>
<option value="">宾利</option>
</select>
<div>
<button class="btn1"> ></button>
<button class="btn2"> >></button>
<button class="btn3"> <</button>
<button class="btn4"> <<</button>
</div>

<select name="" id="sel2" size="5" multiple>
</select>
<script src="js/jQuery-2.2.2-min.js"></script>
<script>
var osel1 = $("#sel1");
var osel2 = $("#sel2");
var oparr1 = $("#sel1").children();
var oparr2 = $("#sel2").children();
var obtn1 = $(".btn1").eq(0);
var obtn2 = $(".btn2").eq(0);
var obtn3 = $(".btn3").eq(0);
var obtn4 = $(".btn4").eq(0);

obtn1.click ( function () {
oparr1.each(function(){
if($(this).is(":selected")){
osel2.append(this);
}
})
})

obtn2.click(function(){
oparr1.each(function(){
osel2.append(this);
})
})

obtn3.click (function(){
oparr2.each(function () {
if(osel2.options[i].selected){
osel1.appendChild(new Option(osel2.options[i].text),osel2.options[i].value);
osel2.removeChild(osel2.options[i]);
}
})
})

obtn4.click = function(){

}

</script>
</body>
</html>

0 0