这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
使用 jquery 实现 select 添加实现后台权限添加的效果,需要的朋友可以参考下。
呃。其实很简单的东西啦。页面的图
两个列表都可以多选,
实现如下效果:
1、双击第一个列表中任意一个列表项,实现向下添加
2、双击第二个列表中任意一个列表项,实现删除,
2、点击按钮,实现对应功能。
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 代码
- <script src="js/jquery-1.6.js">
- </script>
- <script type="text/javascript">
- $(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"));
- });
- })
- </script>
来源: http://www.phperz.com/article/17/0502/283057.html