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

来源：互联网发布：h5页面设计软件编辑：程序博客网时间：2024/06/05 18:22

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

0 0