`
colddemon
  • 浏览: 64358 次
社区版块
存档分类
最新评论

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>

  • 大小: 34.9 KB
2
0
分享到:
评论
2 楼 Jellen129 2012-11-01  
挺不错的,学习了
1 楼 754731046 2012-08-06  
[/u][u][/u][u][u][/u]

相关推荐

    jsp网页产生json传值到java的servlet,再回传到jsp页面

    在本场景中,我们探讨的是如何使用JSP通过Ajax(Asynchronous JavaScript and XML)发送JSON(JavaScript Object Notation)数据到Java的Servlet,然后Servlet处理这些数据并返回JSON响应给JSP页面。这是一个典型的...

    JSP页面中的时间选择器

    本篇文章介绍了如何在 JSP 页面中实现一个基于 JavaScript 的时间选择器控件。该控件可以显示一个日历形式的时间选择器,方便用户选择日期和时间。 知识点一:时间选择器控件 该控件使用 JavaScript 技术开发,...

    jsp中json的应用

    在JSP中,通常使用jQuery的`$.ajax()`或`$.getJSON()`方法实现异步请求,获取JSON数据。 4. **jQuery与JSON**:jQuery提供了一系列便捷的方法来处理JSON数据,例如`$.parseJSON()`用于解析JSON字符串,`$.each()`...

    json2 ajax返回list处理 在jsp页面 遍历

    总结来说,这个场景涉及了使用JSON2处理JSON数据,通过AJAX异步获取这些数据,然后在JSP页面上使用JavaScript进行遍历和显示。对于JSP页面,也可以选择使用JSTL标签进行遍历,但这通常适用于服务器端处理后的数据。

    jsp日期选择器开发技术- Web开发

    综上所述,JSP中的日期选择器开发涉及到前端交互、后端处理、数据验证等多个环节。掌握这些知识点,开发者可以为用户提供更加友好和高效的日期选择体验。通过实践和不断学习,可以进一步提升Web应用的质量和用户体验...

    jSon调用jsp页面,jsp页面中加载公司标签的实现过程(json 异步)

    假设公司标签存储在服务器端的一个json文件中,你可以在异步请求成功后,将json数据解析成JavaScript对象,然后使用DOM操作(如innerHTML或appendChild)动态地在jsp页面上展示这些标签。例如,你可能有一个json...

    struts2的方式返回json到jsp页面 List,Map,Object,对象各种操作都有....MyEclipse的,导入直接看效果。

    jsp通过Ajax无刷新获取Action返回的模拟数据,然后通过struts2转化成json数据返回页面....这里面Map,List,对象等等,一些常用的操作都有。主要的代码在Action和 json.js里面。适合新手入门

    JSP中如何使用JSON

    在IT行业中,JavaScript Object Notation(JSON)是一种轻量级的数据交换格式,广泛应用于服务器与客户端之间的数据传输,尤其是在Web应用程序中。JavaServer Pages(JSP)是Java平台上的一个动态网页技术,常用于...

    SSH框架ajax获取的json格式数据处理过程

    SSH 框架 Ajax 获取的 JSON 格式数据处理过程 在本文中,我们将详细讲解如何使用 SSH 框架中的 Ajax 获取的 JSON 格式数据处理过程,并且实现菜单联动下拉框的功能。 一、Ajax 中 response 返回的数据是一个二维...

    jsp使用JSON.stringify()引用的json2.js

    jsp使用JSON.stringify()引用的json2.js

    jsp 页面颜色选择器

    **JSP 页面颜色选择器详解** 在Web开发中,用户界面的设计是至关重要的,而颜色作为界面设计的重要元素,能够极大地影响用户体验。JSP(JavaServer Pages)是一种动态网页技术,它允许开发者在HTML代码中嵌入Java...

    jsp+ajax+json项目(web)

    【标题】"jsp+ajax+json项目(web)"是一个典型的Web开发实践案例,它将JSP、Ajax和JSON技术融合在一起,展示了如何在实际的Web应用中进行数据的动态交互和更新。该项目旨在帮助初学者理解这三种技术在Web开发中的...

    JSP 颜色选择器 javascript

    这个JSP颜色选择器正是实现了这样的功能,它允许用户通过简单的JavaScript语句在页面上添加一个颜色选择器组件。 2. **初始化与嵌入** 标题中的"一句话进行颜色选择器的初始化"意味着开发者只需要一行JavaScript...

    jQuery+json异步实现JSP和struts2之间的数据传递

    "jQuery+json异步实现JSP和struts2之间的数据传递"是一个典型的应用场景,它结合了前端JavaScript库jQuery与后端MVC框架Struts2,通过JSON这种轻量级的数据交换格式进行高效的数据交互。下面我们将详细探讨这一主题...

    js+jsp+json+tomcat跨域访问

    在IT行业中,跨域访问是Web开发中一个重要的概念,特别是在使用JavaScript、JSP、JSON以及前端库如jQuery时。本教程将详细讲解如何利用这些技术实现跨域数据交互。 首先,我们需要理解“跨域”这个术语。在浏览器的...

    Java Json解析,Java Web Json解析,Java Web服务端获取Json数据,客户端通过HTTP获取Json数据

    对于Java Web服务端获取JSON数据,通常涉及到Servlet、JSP或Spring MVC等框架。当客户端通过HTTP请求发送JSON数据时,服务端需要解析这些数据。例如,在Servlet中,可以使用HttpServletRequest的getInputStream方法...

    jsp页面js调用form表单的值的方法

    ### JSP 页面中 JS 调用 Form 表单的值的方法 在 Web 开发中,JSP(Java Server Pages)是一种广泛使用的服务器端技术,它允许开发者将动态内容嵌入到静态 HTML 页面中。本篇文章主要介绍如何在 JSP 页面中通过 ...

    android之json和gson数据解析最完整的代码例子(包括各种样式的json数据)

    JSON(JavaScript Object Notation)和Gson是Android开发中常用的数据序列化和反序列化工具,用于在客户端和服务器之间交换数据。本文将详细介绍如何在Android应用中使用JSON和Gson进行数据解析,并通过实际代码示例...

    基于JavaScript的JSP页面数据导出Excel.pdf

    在JSP页面数据导出Excel中,JavaScript主要用于数据交互、报表格式设计和数据获取。JavaScript可以通过EXT中间件进行数据交互,使用JsonReader将数据转换为JSON格式,并使用ActiveXObject创建Excel对象,实现数据的...

Global site tag (gtag.js) - Google Analytics