这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
下面小编就为大家带来一篇 Jquery 实现 select multiple 左右添加和删除功能的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
项目要实现这样的一个功能 (如下图所示): 选择左边下拉列表框中的选项, 点击添加按钮, 把选择的选项移动到右边的下拉列表框中, 同样的选择右边的选项, 点击删除按钮, 即把选择的选项移动到左边的下拉列表框中. 相信用 js 很多朋友都写过, 下面是我用 jQuery 来实现这样的功能的。
具体代码如下:
- <center>
- <table>
- <tr align="center">
- <td colspan="3">
- 选择
- </td>
- </tr>
- <tr>
- <td>
- <select id="fb_list" name="fb_list" multiple="multiple"
- size="8" style="width: 300px; height:200px;">
- </select>
- </td>
- <td>
- <input type="button" id="selectup" name="selectup" value="上移∧" />
- <br />
- <input type="button" id="add" name="add" value="添加>>" />
- <br />
- <input type="button" id="delete" name="delete" value="<<移除" />
- <br />
- <input type="button" id="selectdown" name="selectdown" value="下移∨" />
- </td>
- <td>
- <select id="select_list" name="select_list" multiple="multiple"
- size="8" style="width: 300px; height:200px;">
- </select>
- </td>
- </tr>
- </table>
- </center>
- $(function(){
- $.post('testAction!excute.action',null,function(data){
- // var to_data = eval('('+data+')');
- var array = eval(data);
- var obj = document.getElementById("fb_list");
- var value = "";
- for(var i=0;i<array.length;i++){
- value = array[i].id + "/" + array[i].name + "/" + array[i].tel;
- obj.options[i] = new Option(value,value);
- //obj.add(newOption);
- }
- })
- });
- //向右移动
- $(function(){
- $("#add").click(function(){
- if($("#fb_list option:selected").length>0)
- {
- $("#fb_list option:selected").each(function(){
- $("#select_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
- $(this).remove();
- })
- }
- else
- {
- alert("请选择要添加的分包!");
- }
- })
- })
- //向左移动
- $(function(){
- $("#delete").click(function(){
- if($("#select_list option:selected").length>0)
- {
- $("#select_list option:selected").each(function(){
- $("#fb_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
- $(this).remove();
- })
- }
- else
- {
- alert("请选择要删除的分包!");
- }
- })
- })
- //向上移动
- $(function(){
- $("#selectup").click(function(){
- if($("select[name='fb_list'] option:selected").length > 0){
- $("select[name='fb_list'] option:selected").each(function(){
- $(this).prev().before($(this));
- })
- }else{
- alert("请选择要移动的数据!");
- }
- })
- })
- //向下移动
- $(function(){
- $("#selectdown").click(function(){
- if($("select[name='fb_list'] option:selected").length > 0){
- $("select[name='fb_list'] option:selected").each(function(){
- //$(this).next().after($(this));
- $(this).insertAfter($(this).next());
- })
- }else{
- alert("请选择要移动的数据!");
- }
- })
- })
以上这篇 Jquery 实现 select multiple 左右添加和删除功能的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0404/265438.html