网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 Jquery实现select multiple左右添加和删除功能的简单实例
内容
    下面小编就为大家带来一篇Jquery实现select multiple左右添加和删除功能的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。
    名单
    项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的。
    代码如下:
    <center>
     <table>
     <tr>
      <td colspan="3">
      选择
      </td>
     </tr>
     <tr>
      <td>
      <select id="fb_list" name="fb_list" multiple="multiple"
      size="8">
      </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">
      </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左右添加和删除功能的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/19 11:10:58