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

不念不忘少年蓝@ 2024-02-17 15:21 50阅读 0赞

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

一：js文件：

二：jsp文件：

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

<%@ 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 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>