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>
- 大小: 34.9 KB
分享到:
相关推荐
在本场景中,我们探讨的是如何使用JSP通过Ajax(Asynchronous JavaScript and XML)发送JSON(JavaScript Object Notation)数据到Java的Servlet,然后Servlet处理这些数据并返回JSON响应给JSP页面。这是一个典型的...
本篇文章介绍了如何在 JSP 页面中实现一个基于 JavaScript 的时间选择器控件。该控件可以显示一个日历形式的时间选择器,方便用户选择日期和时间。 知识点一:时间选择器控件 该控件使用 JavaScript 技术开发,...
在JSP中,通常使用jQuery的`$.ajax()`或`$.getJSON()`方法实现异步请求,获取JSON数据。 4. **jQuery与JSON**:jQuery提供了一系列便捷的方法来处理JSON数据,例如`$.parseJSON()`用于解析JSON字符串,`$.each()`...
总结来说,这个场景涉及了使用JSON2处理JSON数据,通过AJAX异步获取这些数据,然后在JSP页面上使用JavaScript进行遍历和显示。对于JSP页面,也可以选择使用JSTL标签进行遍历,但这通常适用于服务器端处理后的数据。
综上所述,JSP中的日期选择器开发涉及到前端交互、后端处理、数据验证等多个环节。掌握这些知识点,开发者可以为用户提供更加友好和高效的日期选择体验。通过实践和不断学习,可以进一步提升Web应用的质量和用户体验...
假设公司标签存储在服务器端的一个json文件中,你可以在异步请求成功后,将json数据解析成JavaScript对象,然后使用DOM操作(如innerHTML或appendChild)动态地在jsp页面上展示这些标签。例如,你可能有一个json...
jsp通过Ajax无刷新获取Action返回的模拟数据,然后通过struts2转化成json数据返回页面....这里面Map,List,对象等等,一些常用的操作都有。主要的代码在Action和 json.js里面。适合新手入门
在IT行业中,JavaScript Object Notation(JSON)是一种轻量级的数据交换格式,广泛应用于服务器与客户端之间的数据传输,尤其是在Web应用程序中。JavaServer Pages(JSP)是Java平台上的一个动态网页技术,常用于...
SSH 框架 Ajax 获取的 JSON 格式数据处理过程 在本文中,我们将详细讲解如何使用 SSH 框架中的 Ajax 获取的 JSON 格式数据处理过程,并且实现菜单联动下拉框的功能。 一、Ajax 中 response 返回的数据是一个二维...
jsp使用JSON.stringify()引用的json2.js
**JSP 页面颜色选择器详解** 在Web开发中,用户界面的设计是至关重要的,而颜色作为界面设计的重要元素,能够极大地影响用户体验。JSP(JavaServer Pages)是一种动态网页技术,它允许开发者在HTML代码中嵌入Java...
【标题】"jsp+ajax+json项目(web)"是一个典型的Web开发实践案例,它将JSP、Ajax和JSON技术融合在一起,展示了如何在实际的Web应用中进行数据的动态交互和更新。该项目旨在帮助初学者理解这三种技术在Web开发中的...
这个JSP颜色选择器正是实现了这样的功能,它允许用户通过简单的JavaScript语句在页面上添加一个颜色选择器组件。 2. **初始化与嵌入** 标题中的"一句话进行颜色选择器的初始化"意味着开发者只需要一行JavaScript...
"jQuery+json异步实现JSP和struts2之间的数据传递"是一个典型的应用场景,它结合了前端JavaScript库jQuery与后端MVC框架Struts2,通过JSON这种轻量级的数据交换格式进行高效的数据交互。下面我们将详细探讨这一主题...
在IT行业中,跨域访问是Web开发中一个重要的概念,特别是在使用JavaScript、JSP、JSON以及前端库如jQuery时。本教程将详细讲解如何利用这些技术实现跨域数据交互。 首先,我们需要理解“跨域”这个术语。在浏览器的...
对于Java Web服务端获取JSON数据,通常涉及到Servlet、JSP或Spring MVC等框架。当客户端通过HTTP请求发送JSON数据时,服务端需要解析这些数据。例如,在Servlet中,可以使用HttpServletRequest的getInputStream方法...
### JSP 页面中 JS 调用 Form 表单的值的方法 在 Web 开发中,JSP(Java Server Pages)是一种广泛使用的服务器端技术,它允许开发者将动态内容嵌入到静态 HTML 页面中。本篇文章主要介绍如何在 JSP 页面中通过 ...
JSON(JavaScript Object Notation)和Gson是Android开发中常用的数据序列化和反序列化工具,用于在客户端和服务器之间交换数据。本文将详细介绍如何在Android应用中使用JSON和Gson进行数据解析,并通过实际代码示例...
在JSP页面数据导出Excel中,JavaScript主要用于数据交互、报表格式设计和数据获取。JavaScript可以通过EXT中间件进行数据交互,使用JsonReader将数据转换为JSON格式,并使用ActiveXObject创建Excel对象,实现数据的...