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

最新推荐文章于 2022-02-18 18:08:16 发布

最新推荐文章于 2022-02-18 18:08:16 发布 · 339 阅读

文章标签：

摘要：最近项目中用到了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>