jQuery简单实现列表互移
作者:
幻凌风 | 来源:发表于
2017-08-21 23:57 被阅读6次
列表互移.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
select{
height:300px;
width:200px;
border:20px solid #0094ff;
}
</style>
<script src="script/jquery-3.2.1.js"></script>
<script>
$(function () {
//为全部右移绑定事件
$("#btnRightAll").click(function () {
$("#selectLeft").children().appendTo($("#selectRight"));
});
//为选中右移绑定事件
$("#btnRight").click(function () {
$("#selectLeft option:selected").appendTo($("#selectRight"));
})
//为选中左移绑定事件
$("#btnLeft").click(function () {
$("#selectLeft ").append($("#selectRight option:selected"));
})
//为全部左移绑定事件
$("#btnLeftAll").click(function () {
$("#selectLeft ").append($("#selectRight").children());
})
})
</script>
</head>
<body>
<select id="selectLeft" multiple="true">
<option>北京</option>
<option>河南</option>
<option>福州</option>
<option>陕西</option>
<option>河北</option>
<option>天津</option>
<option>甘肃</option>
<option>宁夏</option>
<option>新疆</option>
<option>青海</option>
<option>海南</option>
<option>安徽</option>
<option>山东</option>
<option>云南</option>
<option>贵州</option>
<option>四川</option>
</select>
<input type="button" value=">>" id="btnRightAll"/>
<input type="button" value=">" id="btnRight"/>
<input type="button" value="<" id="btnLeft"/>
<input type="button" value="<<" id="btnLeftAll"/>
<select id="selectRight" multiple="true">
</select>
</body>
</html>
本文标题：jQuery简单实现列表互移
本文链接：https://www.haomeiwen.com/subject/qdhkdxtx.html
网友评论