jQuery实现左右选中添加功能
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>左右选中.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<style>
input[type='button']{
width:50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="left" multiple="true" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1"><br>
<input type="button" value=">>" id="toRight2"><br>
<input type="button" value=">>>" id="toRight3"><br><br>
<input type="button" value="<" id="toLeft1"><br>
<input type="button" value="<<" id="toLeft2"><br>
<input type="button" value="<<<" id="toLeft3">
</td>
<td>
<select id="right" multiple="true" style="width:100px" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>
jQuery代码
<script type="text/javascript">
$(function () {
//移动一个
$("#toRight1").click(function(){
$("#left>option:selected:first").appendTo($("#right"));
});
//移动多个
$("#toRight2").click(function () {
$("#right").append($("#left option:selected"))
})
//移动全部
$("#toRight3").click(function () {
$("#right").append($("#left option"));
})
//移动一个
$("#toLeft1").click(function(){
$("#right>option:selected:first").appendTo($("#left"));
});
//移动多个
$("#toLeft2").click(function () {
$("#left").append($("#right option:selected"))
})
//移动全部
$("#toLeft3").click(function () {
$("#left").append($("#right option"));
})
})
</script>
浙公网安备 33010602011771号