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

最新推荐文章于 2026-06-16 09:20:31 发布

最新推荐文章于 2026-06-16 09:20:31 发布 · 341 阅读

标签

#js #jsp #双向选择 #ajax #ViewUI

web前端同时被 3 个专栏收录

3 篇文章

订阅专栏

js插件

2 篇文章

订阅专栏

jsp

1 篇文章

订阅专栏

本文介绍了一个基于jsp页面的双向选择器实现角色管理功能，包括选择、添加、删除角色的操作，通过js代码实现角色的双击选择、按钮操作等交互，并使用ajax获取角色数据。

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>  <button type="button" id="close">关闭</button>

			<!--    
			<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>