左右选择添加、删除

最新推荐文章于 2021-06-02 20:52:13 发布

lgj346435400

最新推荐文章于 2021-06-02 20:52:13 发布

阅读量178

点赞数

分类专栏： javascript 文章标签：左右选择添加删除 js

本文链接：https://blog.csdn.net/lgj346435400/article/details/84396629

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

左右选择添加、删除菜单内容。运行后的效果图片：

运行后的效果

运行前请引入jquery。

<html>
<head>
<title>左右选择添加、删除菜单内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript" type="text/javascript" src="jquery-1.7.2.js"></script>  
<style type="text/css">
.Left{float:left; margin:0px 20px 0px 20px;}
.Right{float:left;overflow:hidden;margin-left:20px;}
.Center{float:left;margin:0px 10px 0px 10px;}
div.Center ,div.Right ,div.Left {margin-top:20px;}
.select{width:140px;height:200px;}
</style>
<script type="text/javascript">
$(function(){
    //移到右边
    $('#add').click(function() {
    //获取选中的选项，删除并追加给对方
        $('#select1 option:selected').appendTo('#select2');
    });
    //移到左边
    $('#remove').click(function() {
        $('#select2 option:selected').appendTo('#select1');
    });
    //全部移到右边
    $('#add_all').click(function() {
        //获取全部的选项,删除并追加给对方
        $('#select1 option').appendTo('#select2');
    });
    //全部移到左边
    $('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
    });
    //双击选项
    $('#select1').dblclick(function(){ //绑定双击事件
        //获取全部的选项,删除并追加给对方
        $("option:selected",this).appendTo('#select2'); //追加给对方
    });
    //双击选项
    $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
    });
});
</script>
</head>
<body>
<div class="main">
    <div class="Left">
        <select multiple="multiple" id="select1" class="select">
            <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="8">选项8</option>
			<option value="9">选项9</option>
			<option value="10">选项10</option>
			<option value="11">选项11</option>
			<option value="12">选项12</option>
			<option value="13">选项13</option>
			<option value="14">选项14</option>
        </select>
    </div>
	<div class="Center">
		<div>
			<input type="button" value="选择&gt;" id="add"/><br/><br/>
			<input type="button" value="全部添加&gt;&gt" id="add_all"/>
        </div><br/><br/>
		<div>
			<input type="button" value="&lt;删除" id="remove"/><br/><br/>
			<input type="button" value="全部删除&gt;&gt" id="remove_all"/>
        </div>
   </div>
   <div class="Right">
        <select multiple="multiple" id="select2" class="select">
            <option value="7">选项7</option>
        </select>
    </div>
<div>
</body>
</html>

lgj346435400

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左右选择添加、删除

左右选择添加、删除菜单内容。运行后的效果图片：运行前请引入jquery。 &lt;html&gt;&lt;head&gt;&lt;title&gt;左右选择添加、删除菜单内容&lt;/title&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt
复制链接

扫一扫