js写的双向选择器 案例（jsp页面,json获取数据）

1. 双向选择器，略有修改，效果见附件图，jsp页面：

 
<table align="center" width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td width="40%">
	请选择<br/>
	<select name="s1" size="15" multiple="multiple" id="s1"  style="width:100%;">
    </select>
	</td>
  	<td width="20%" align="center"> 
     <input type="button" name="add" id="add" value=" >  " />

     <input type="button" name="addall" id="addall" value=">> " />

     <input type="button" name="remove" id="remove" value=" <  " />

     <input type="button" name="removeall" id="removeall" value="<< " />
	 </td>
   <td width="40%">
   已选择<br/>
   <select name="s2" size="15" multiple="multiple" id="s2" style=" width:100%;"> </select>
   </td>
</tr> 
</table><br/><br/>
  <div align="center">
            <button id="updaterole" type="button">保存</button>&nbsp;&nbsp;<button type="button" id="close">关闭</button>
			
			<!-- &nbsp;&nbsp;&nbsp;
			<input id="reset" type="reset" value="返回"/> -->
	</div>
</form>
		</div>

2. js代码：（在同一jsp页面）
双击可进行选择
用ajax获取待选项与已选项，已选择json返回格式为：

[{"name":"超级管理员","id":1,"description":"超级管理员","status":1,"createDatetime":"2011-12-08 15:20:15","createBy":1,"updateDatetime":"2011-12-08 15:20:19","updateBy":1}]

 
<script type="text/javascript">
 $("#s1").html("");
   	 $("#s2").html("");
   	 //请选择角色
   	 $.ajax({
					url: "services/sys/sel-wait.do",
					data: {"operid":id},
					success: function(data) {
					for(var i=0;i<data.length;i++){
					$("#s1").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
					}		
					},
					error: function() {
					
					}
				});
	//已选择角色
	 $.ajax({
					url: "services/sys/sel-select.do",
					data: {"operid":id},
					success: function(data) {
					for(var i=0;i<data.length;i++){
					$("#s2").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
					}		
					},
					error: function() {
					
					}
				});

//$("#s1 option:first,#s2 option:first").attr("selected",true);
$("#s1").dblclick(function(){
$("option:selected",this).clone().appendTo("#s2");
$("option:selected",this).remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#s2").dblclick(function(){
$("option:selected",this).clone().appendTo("#s1");
$("option:selected",this).remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#add").click(function(){
$("#s1 option:selected").clone().appendTo("#s2");
$("#s1 option:selected").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#remove").click(function(){
$("#s2 option:selected").clone().appendTo("#s1");
$("#s2 option:selected").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#addall").click(function(){
$("#s1 option").clone().appendTo("#s2");
$("#s1 option").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#removeall").click(function(){
$("#s2 option").clone().appendTo("#s1");
$("#s2 option").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});

 </script>

评论

2 楼 Jellen129 2012-11-01  

挺不错的，学习了

1 楼 754731046 2012-08-06  

[/u][u][/u][u][u][/u]