html:
<div id="d1">
<div id="title">选课</div>
<div id="d3">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>可选择的课程</td>
<td> </td>
<td>已选择的课程</td>
</tr>
<tr>
<td>
<select id="s1" name="s1" multiple="multiple">
<option value="zsf">嵌入式开发</option>
<option value="xrr">中间件</option>
<option value="hh">图形处理</option>
<option value="Mysql">Mysql</option>
<option value="Redis">Redis</option>
<option value="PHP">PHP</option>
</select>
</td>
<td style="padding: 0px 20px;">
<p><input type="button" id="b1" class="s1" value="−−>"></p>
<p><input type="button" id="b2" class="s1" value="−−>>"></p>
<p><input type="button" id="b3" class="s1" value="<−−"></p>
<p><input type="button" id="b4" class="s1" value="<<−−"></p>
</td>
<td>
<select id="s2" name="s2" multiple="multiple"></select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
css:
<style type="text/css">
#s1,
#s2 {
width: 150px;
height: 220px;
overflow-y: auto;
}
#d1 {
width: 500px;
height: 320px;
background-color: #F5DEB3;
margin: 0 auto;
}
#title {
height: 30px;
font-size: 24px;
background-color: green;
color: white;
text-align: center;
}
#d3 {
padding-left: 40px;
margin-top: 10px;
}
input {
width: 80px;
}
</style>
js:
<script type="text/javascript">
$(function() {
//从左边单个添加到右边
$('#b1').click(function() {
$obj = $('#s1 option:selected').clone(true);
if($obj.size() == 0) {
alert("请至少选择一条!");
}
$('#s2').append($obj);
$('#s1 option:selected').remove();
});
//从左边全部添加到右边
$('#b2').click(function() {
$('#s2').append($('#s1 option'));
});
//从右边单个添加到左边
$('#b3').click(function() {
$obj = $('#s2 option:selected').clone(true);
if($obj.size() == 0) {
alert("请至少选择一条!");
}
$('#s1').append($obj);
$('#s2 option:selected').remove();
});
//从右边全部添加到左边
$('#b4').click(function() {
$('#s1').append($('#s2 option'));
});
//双击元素添加
$('option').dblclick(function() {
var flag = $(this).parent().attr('id');
if(flag == "s1") {
var $obj = $(this).clone(true);
$('#s2').append($obj);
$(this).remove();
} else {
var $obj = $(this).clone(true);
$('#s1').append($obj);
$(this).remove();
}
});
});
</script>