您的位置：首页 > Web前端 > JQuery

jQuery实现下拉框左右移动（全部移动，已选移动）

2016-04-15 00:00 639 查看

用到的方法为：appendTo()

格式：$(content).appendTo(selector)

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

看一下具体实现的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#add").click(function () {
//1,方式一
//        var $option = $("#select1 option:selected");  //获取选中的选项
//        var $remove = $option.remove(); //删除下拉列表中选中的选项
//        $remove.appendTo("#select2");  //追加给对方
//2，方式二
var $option = $("#select1 option:selected");  //获取选中的选项
$option.appendTo("#select2");  //追加给对方
});
$("#add_all").click(function () {
var $option = $("#select1 option");
$option.appendTo("#select2");
});
$("#remove").click(function () {
var $option = $("#select2 option:selected");
$option.appendTo("#select1");
});
$("#remove_all").click(function () {
var $option = $("#select2 option");
$option.appendTo("#select1");
});
});
</script>
</head>
<body>
<h3>下拉框应用</h3>
<table>
<tr>
<td>
<select id="select1" multiple="multiple" style="width:100px;">
<option value="News">News</option>
<option value="Sport">Sport</option>
<option value="Education">Education</option>
<option value="Technology">Technology</option>
<option value="Art">Art</option>
</select>
</td>
<td>
<button id="add">
>|</button><br />
<button id="add_all">
>></button><br />
<button id="remove_all">
<<</button><br />
<button id="remove">
|<</button>
</td>
<td>
<select id="select2" multiple="multiple" style="width:100px;">
</select>
</td>
</tr>
</table>
</body>
</html>

运行效果：

您可能感兴趣的文章:

jquery select多选框的左右移动具体实现代码
Jquery多选框互相内容交换的实例代码
jquery对单选框,多选框,文本框等常见操作小结
jQuery对下拉框,单选框,多选框的操作
jQuery实现的多选框多级联动插件
JQuery打造省市下拉框联动效果
jQuery操作select下拉框的text值和value值的方法
基于jquery实现的可编辑下拉框实现代码
jQuery制作简洁的多级联动Select下拉框
jQuery+easyui中的combobox实现下拉框特效
JQuery select（下拉框）操作方法汇总
jquery中表单多选框的一种巧妙写法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 下拉框移动

相关文章推荐

新的分享

章节导航