JQuery,ajax异步加载多选框：
摘要：最近项目中用到了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 }" onclick="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 }" onclick="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:;" onclick="submitForm();">保存</a></td>
</tr>
</tbody>
</table>
</form:form>
</div>
</body>
</html>