×

使用jquery实现select添加实现后台权限添加

作者:shiji2018.04.16来源:Web前端之家浏览:1862评论:0
关键词:JQueryJS

使用jquery实现select添加实现后台权限添加。

两个列表都可以多选,

实现如下效果:

1、双击第一个列表中任意一个列表项,实现向下添加

2、双击第二个列表中任意一个列表项,实现删除,

3、点击按钮,实现对应功能。

Html代码

<form name="form1" method="post" action=""> 
<select id="select1" size="5" multiple style="width:100px " > 
<option value="111">北京</option> 
<option value="222">上海</option> 
<option value="333">广州</option> 
<option value="333">山东</option> 
<option value="333">常州</option> 
</select><br/><br/> 
<input type="button" id="button1" value="添加"> 
<input type="button" id="button2" value="删除"><br/><br/> 
<select id="select2" size="5" multiple style="width:100px " > 

</select> 
</form>

jquery代码:

$(document).ready(function(){ 
    $("#select1").dblclick(function () { $("#select1 :selected").appendTo($("#select2")); }); 
    $("#select2").dblclick(function () { $("#select2 :selected").appendTo($("#select1")); }); 
    $("#button1").click(function () { $("#select1 option:selected").appendTo($("#select2")); }); 
    $("#button2").click(function () { $("#select2 option:selected").appendTo($("#select1")); }); 
})
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/svg1488211200552.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • admin

    是的,新版也是不错的。...

  • Qanmy

    火狐56版本最经典。。。...

  • 前端大爆炸

    交换一下链接前端大爆炸!-WEBBANG!BANG!!BANG!!!https://a...

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

  • 男装品牌

    文章不错支持一下...

  • 女装品牌

    文章不错非常喜欢...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero