JQuery,ajax异步加载selectoption/option/select多选框：

摘要：最近项目中用到了jquery，ajax，由于很长时间没用了，所以这次做花了很多时间，现在记录一下，方便以后回忆：

一：js文件：

<script type="text/javascript">// 进出港显示字段权限分配function jingchugang(){var tableName = $('input:radio:checked').val();$.ajax({type:"POST",url:"<s:url value='/u/showFieldSet'/>",data:"tableName="+tableName,dataType:"json",success:function(dataMap){var fieldList = dataMap.fieldList;if(fieldList != null && fieldList.length > 0){//var start = "<select id='selectL' name='selectL' multiple='multiple'>";//var str = '';for(var i = 0; i< fieldList.length; i++){//str += "<tr><td><input type='checkbox' id='fieldName' name='fieldName'/>"+fieldList[i].fieldName+"<td></tr>";//str += "<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>";$("<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>").appendTo("#selectL");}//var end = "</select>";//$("str").appendTo("#selectL");}},});}
</script>

二：jsp文件：

<tr class="even"><td><div class="select_side"><p>待选区</p><select id="selectL" name="selectL" multiple="multiple"></select></div><div class="select_opt"><p id="toright" title="添加">></p><p id="toleft" title="移除"><</p></div><div class="select_side"><p>已选区</p><select id="selectR" name="selectR" multiple="multiple"></select></div><div class="sub_btn"><input type="button" id="sub" value="getValue" /></div></td></tr>

三：最后我把这个页面附上：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ include file="../../common/include_tag.jsp"%>
<%@ include file="../../common/page_var.jsp"%>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%=pageTitle%></title>
<link href="<s:url value='/images/favicon.ico'/>" rel="shortcut icon"type="image/x-icon" />
<%@ include file="../../common/page_head.jsp"%>
<script type="text/javascript">$(function() {pilicat.title2div('title2div');pilicat.keysubmit('form1', 'submit', true);});
</script>
<script type="text/javascript">
$(function(){var leftSel = $("#selectL");var rightSel = $("#selectR");$("#toright").bind("click",function(){      leftSel.find("option:selected").each(function(){$(this).remove().appendTo(rightSel);});});$("#toleft").bind("click",function(){       rightSel.find("option:selected").each(function(){$(this).remove().appendTo(leftSel);});});leftSel.dblclick(function(){$(this).find("option:selected").each(function(){$(this).remove().appendTo(rightSel);});});rightSel.dblclick(function(){$(this).find("option:selected").each(function(){$(this).remove().appendTo(leftSel);});});$("#sub").click(function(){var showFields = [];rightSel.find("option").each(function(){showFields.push(this.value);});showFields = showFields.join(",");if(showFields == ""){alert("没有选择任何项！");}else{alert(showFields);}});});
</script>
<script type="text/javascript">// 进出港显示字段权限分配function jingchugang(){var tableName = $('input:radio:checked').val();$.ajax({type:"POST",url:"<s:url value='/u/showFieldSet'/>",data:"tableName="+tableName,dataType:"json",success:function(dataMap){var fieldList = dataMap.fieldList;if(fieldList != null && fieldList.length > 0){//var start = "<select id='selectL' name='selectL' multiple='multiple'>";//var str = '';for(var i = 0; i< fieldList.length; i++){//str += "<tr><td><input type='checkbox' id='fieldName' name='fieldName'/>"+fieldList[i].fieldName+"<td></tr>";//str += "<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>";$("<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>").appendTo("#selectL");}//var end = "</select>";//$("str").appendTo("#selectL");}},});}
</script>
<script type="text/javascript">$(document).ready(function() {$('#form1').ajaxForm({dataType : 'json',beforeSubmit : checkForm,success : afterPost});});function checkForm(formData, jqForm, options) {alert(formData);}function afterPost(responseText, statusText, xhr, $form) {if (responseText.resultStatus == true) {parent.$.jBox.tip("保存成功，请刷新查看结果", "success", {timeout : 2000});parent.$.jBox.close(true);} else {$.jBox.error("保存失败", "失败信息");}}function submitForm() {getSelectAll();}
</script>
<style type="text/css">
.update {margin: 0 auto;padding: 0;width: 98%;
}.update td {margin: 0;height: 30px;padding: 5px;
}.update .name {text-align: right;
}.title_div {width: 350px;
}body {background: url("<s:url value='/images/gray_bg.png'/>") 0 0 repeat-y#F6F6F6;
}
</style>
<style type="text/css">
.select_side {float: left;width: 200px
}select {width: 180px;height: 120px
}.select_opt {float: left;width: 40px;height: 100%;margin-top: 36px
}.select_opt p {width: 26px;height: 26px;margin-top: 6px;background: url("<s:url value='/images/arr.gif'/>") no-repeat;cursor: pointer;text-indent: -999em
}.select_opt p#toright {background-position: 2px 0
}.select_opt p#toleft {background-position: 2px -22px
}
</style>
</head>
<body><div class="rounded table"><table width="100%" cellpadding="0" cellspacing="0" border="0" class="box_top"><tbody><tr><td class="title"></td><td></td></tr></tbody></table><div class="error rounded top_error hide"><ol></ol><span></span></div><form:form id="form1" commandName="roleInfo" action="${pageContext.request.contextPath}/u/saveRoleShowField" method="post"><table class="update" cellpadding="0" cellspacing="1" border="0"><tbody><tr class="even"><td>角色名称： ${roleInfo.roleName }<input type="hidden" name="id" value="${roleInfo.id}" /><input type="hidden"  name="showFields" value="${showFields}" /></td></tr><tr class="even"><td>航班类型：<c:forEach items="${tableNameList}" var="tableName"><c:if test="${tableName  == 'TB_CMS_FLGTINFO_D'}"><input type="radio" class="radio" name="tableName" id="TB_CMS_FLGTINFO_D" value="${tableName }" οnclick="jingchugang(${tableName});" />出港列表</c:if><c:if test="${tableName  == 'TB_CMS_FLGTINFO_A'}"><input type="radio" class="radio" name="tableName" id="TB_CMS_FLGTINFO_A" value="${tableName }" οnclick="jingchugang(${tableName});"/>进港列表</c:if></c:forEach></td></tr><tr class="even"><td>赋予的显示字段列表：</td></tr><!-- <tr class="even"><td><div id="menuTree"></div></td></tr> --><tr class="even"><td><div class="select_side"><p>待选区</p><select id="selectL" name="selectL" multiple="multiple"></select></div><div class="select_opt"><p id="toright" title="添加">></p><p id="toleft" title="移除"><</p></div><div class="select_side"><p>已选区</p><select id="selectR" name="selectR" multiple="multiple"></select></div><div class="sub_btn"><input type="button" id="sub" value="getValue" /></div></td></tr><%-- <tr class="even"><td>赋予的显示字段列表：</td></tr><tr class="even"><td><form:checkboxes items="${roleShowEntities }" path="showFields" itemLabel="fieldName" itemValue="id" delimiter=""/></td></tr> --%></tbody></table><table class="table top_line"><tbody><tr><td align="center" height="60"><a id="submit" class="submit"href="javascript:;" οnclick="submitForm();">保存</a></td></tr></tbody></table></form:form></div>
</body>
</html>

JQuery,ajax异步加载selectoption/option/select多选框：相关推荐

java jsp 页面下拉框 ajax异步加载数库数据
全面详细的新手下拉框数据显示.web项目中难免用到下拉框异步加载数据的情况.这里分享一个.使用的是jquery的ajax异步加载后台数据.后台使用java语言. 1,先看效果,下拉框如下: 2.获取值 ...
4.3.2 用jQuery进行异步加载（2）
4.3.2 用jQuery进行异步加载(2) 2008-09-28 16:09 (英)格雷恩(Granc,D.)等著/贺师俊等译人民邮电出版社我要评论(5) 字号:T | T 综合评级: 想读(1 ...
jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
4.3.2 用jQuery进行异步加载（1）
4.3.2 用jQuery进行异步加载(1) 2008-09-28 16:09 (英)格雷恩(Granc,D.)等著/贺师俊等译人民邮电出版社我要评论(0) 字号:T | T 综合评级: 想读(1 ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
加载不了ajax,简单的jquery ajax内容加载不起作用
嗨,大家好,我对这个脚本有问题.它不工作.它应该将页面加载到我的内容中,与下面的脚本相同.简单的jquery ajax内容加载不起作用 JS - 不工作 $("#buttons img&qu ...
彭于晏百度图片Ajax异步加载爬取
Ajax 异步加载网页爬取分析网页在Networka条目里找xhr Ajax 加载 import requests from urllib.parse import urlencode impo ...
Ajax异步加载的知识点
1.如果是页面的一块刷新那么用jQuery的 load 加上时间搓是为了防止相同. $("#mainRigth").load("/IHealth/" + l ...
Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...

JQuery,ajax异步加载selectoption/option/select多选框：

JQuery,ajax异步加载selectoption/option/select多选框：相关推荐

最新文章

热门文章