jQuery实现双向选择列表框

最新推荐文章于 2018-09-12 14:38:00 发布

wen2r

最新推荐文章于 2018-09-12 14:38:00 发布

阅读量293

点赞数

文章标签： jQuery JavaScript Ajax XHTML HTML ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <base href="<%=basePath%>">
    <title>双向选择列表框</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
</head>
<script type="text/javascript">
  //添加一些测试内容
  $(function(){
   for(var i=1;i<10;i++){
    $("#leftBox").append("<option value='"+i+"'>192.168.0.2"+i+"</option>");
    $("#rightBox").append("<option value='"+i+9+"'>221.11.48.16"+i+"</option>");
   }
  });
</script>
<body>
  <form name="form1" action="" method="">
  <div>
   <table align="center" width="50%">
    <tr>
     <td width="40%">
      <select id="leftBox" size="15" style="width:90%;" multiple="multiple">
      </select>
     </td>
     <td width="20%" align="center">
      <input id="allRight" type="button" value=" >> ">
      <p><br>
      <input id="allLeft" type="button" value=" << ">
     </td>
     <td width="40%">
      <select id="rightBox" size="15" style="width:90%;" multiple="multiple"></select>
     </td>
    </tr>
   </table>
  </div>
  <br>
  <div align="center">
   <input id="btnLeft" type="button" value="左侧保存">
      
   <input id="btnRight" type="button" value="右侧保存">
  </div>
  </form>
</body>
<script type="text/javascript">
$(function(){
//由左移到右
$("#leftBox").change(function(){
  var lbox = $("#leftBox option:selected");
  $(lbox).each(function(){
   $(lbox).remove();
   $("#rightBox").append(lbox);
  });
  $("#rightBox").attr("selectedIndex",-1);
});
//由右移到左
$("#rightBox").change(function(){
  var rbox = $("#rightBox option:selected");
  $(rbox).each(function(){
   rbox.remove();
   $("#leftBox").append(rbox);
  });
  $("#leftBox").attr("selectedIndex",-1);
});
//全部移动到右侧
$("#allRight").click(function(){
  $("#leftBox option").appendTo("#rightBox");
});
//全部移动到左侧
$("#allLeft").click(function(){
  $("#rightBox option").appendTo("#leftBox");
});
//左侧保存
$("#btnLeft").click(function(){
  var larr = new Array();
  $("#leftBox option").each(function(){
   larr.push($(this).val());
  });
  if(confirm("确认修改权限设置？")==true){
   $.ajax({
    url:'updateJobMenu.action',
    type:'POST',
    data:{'strValue':larr.toString()},
    error:function(){
     alert("数据加载出现异常，请重试！");
    },
    success:function(){
     alert("权限修改成功！");
    }
   });
  }
});
//右侧保存
$("#btnRight").click(function(){
  var rarr = new Array();
  $("#rightBox option").each(function(){
   rarr.push($(this).val());
  });
  if(confirm("确认修改权限设置？")==true){
   $.ajax({
    url:'updateJobMenu.action',
    type:'POST',
    data:{'strValue':rarr.toString()},
    error:function(){
     alert("数据加载出现异常，请重试！");
    },
    success:function(){
     alert("权限修改成功！");
    }
   });
  }
});
});
</script>
</html>