JQuery,ajax异步加载selectoption/option/select多选框：
生活随笔
收集整理的這篇文章主要介紹了
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多选框：的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iis7怎么安装php7,Linux下如
- 下一篇： Oracle 单行函数