jq下拉框穿梭组件
jq下拉框穿梭组件展示,左边点击添加到右边,右边可以删除到左边,可以单个添加/全部添加跟单个删除/全部删除,还可以双击内容添加/删除.
效果:
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="jquery-1.11.3.min.js"></script>
<style>
.content{ float: left; margin:0 10px;}
.btn{ width:114px; padding:5px 10px;background: #ea5413; color: #fff; text-align: center; font-size:12px; margin:10px 0; display: block; cursor: pointer;}
</style>
</head>
<body>
<div class="content">
<select multiple id="select1" style="width: 100px;height: 160px;">
<option value="1">选项 1</option>
<option value="2">选项 2</option>
<option value="3">选项 3</option>
<option value="4">选项 4</option>
<option value="5">选项 5</option>
<option value="6">选项 6</option>
<option value="7">选项 7</option>
<option value="8">选项 8</option>
</select>
<div>
<span class="btn" id="add">选中添加到右边 >></span>
<span class="btn" id="add_all">全部添加到右边 >></span>
</div>
</div>
<div class="content">
<select multiple id="select2" style="width: 100px;height: 160px;">
<option value="1">选项 1</option>
<option value="2">选项 2</option>
<option value="3">选项 3</option>
<option value="4">选项 4</option>
<option value="5">选项 5</option>
<option value="6">选项 6</option>
<option value="7">选项 7</option>
<option value="8">选项 8</option>
</select>
<div>
<span class="btn" id="remove"><< 选中删除到左边</span>
<span class="btn" id="remove_all"><< 全部删除到左边</span>
</div>
</div>
<script>
$(function () {
//添加
$('#add').click(function () {
var $options = $('#select1 option:selected');
// var $remove = $options.remove(); //这句可有可无
$options.appendTo('#select2');
})
//添加全部
$('#add_all').click(function () {
var $options = $('#select1 option');
// var $remove = $options.remove(); //这句可有可无
$options.appendTo('#select2');
})
//删除
$('#remove').click(function () {
var $options = $('#select2 option:selected');
// var $remove = $options.remove(); //这句可有可无
$options.appendTo('#select1');
})
//删除全部
$('#remove_all').click(function () {
var $options = $('#select2 option');
// var $remove = $options.remove(); //这句可有可无
$options.appendTo('#select1');
})
//双击添加
$('#select1').dblclick(function () {
var $options = $('option:selected',this);
$options.appendTo('#select2');
})
//双击删除
$('#select2').dblclick(function () {
var $options = $('option:selected',this);
$options.appendTo('#select1');
})
})
</script>
</body>
</html>以上就是,想要查看效果请下载.
本文作者： Jasmine
本文链接： https://www.jianbaizhan.com/article/629
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！