使用ajax+jqtransform實現(xiàn)動態(tài)加載select
今天在工作的時候遇到一個問題,頁面中公司名稱是在項目名稱選擇后用ajax讀取出來的。但是jqtransform是在頁面加載完成后調(diào)用的,所以導(dǎo)致了公司名稱下拉框無法展示最新的數(shù)據(jù)。
<link rel="stylesheet" href="${ctx}/jqtransformplugin/jqtransform.css" type="text/css"></link>
<script type="text/javascript" src="${ctx}/jqtransformplugin/jquery.jqtransform.js"></script>
<SCRIPT type="text/javascript">
$(function(){
$('form').jqTransform({imgPath:'images/JQueryformimg/'});
});
</SCRIPT>
用firebug可以看到數(shù)據(jù)其實已經(jīng)拼接上去了,但是form已經(jīng)在頁面加載后已經(jīng)調(diào)用過jqTransform方法, jqTransformSelectWrapper里面的ul數(shù)據(jù)沒有更新。想了許久決定用簡單粗暴的方法把ul更新掉。
function companyAjax(proid){
$.ajax({
type:"POST",
url:"${pageContext.request.contextPath}/recordsearch/ajax/getCompanyAjax.do",
dataType:"json",
data:{proid : proid},
success:function(jsondata){
var tmp='';
tmp+='<select id="centerid" name="centerid" onchange="comChange()" style="width: 160px;" name="centerid">';
//$("#centerid").empty(); tmp+='<option value="">--請選擇--</option>';
for(var i=0;i<jsondata.length;i++){
tmp+='<option value="'+jsondata[i].centerid+'">'+jsondata[i].centername+'</option>';
}
tmp+='</select>';
$("#centerid").parent().remove();
$("#comLable").after(tmp);
$("#centerid").jqTransSelect();
}
});
}
哈哈,在ajax查詢公司數(shù)據(jù)之后,將jqtransform生成的select相關(guān)的div刪除掉,然后把selct拼接上,再重新初始化select。方法比較蠢,不過先用著吧,以后有更好的辦法再說。
是不是很炫酷。。哈哈,其實還是jqtransform比較給力,小伙伴們以后需要使用類似效果的話,可以參考下。
- AJAX和jQuery動態(tài)加載數(shù)據(jù)的實現(xiàn)方法
- DataTables+BootStrap組合使用Ajax來獲取數(shù)據(jù)并且動態(tài)加載dom的方法(排序,過濾,分頁等)
- 使用PHP+AJAX讓W(xué)ordPress動態(tài)加載文章的教程
- jQuery結(jié)合ajax實現(xiàn)動態(tài)加載文本內(nèi)容
- php+ajax實現(xiàn)無刷新動態(tài)加載數(shù)據(jù)技術(shù)
- Ajax動態(tài)加載數(shù)據(jù)庫示例
- 用ajax動態(tài)加載需要的js文件
- 利用Dojo和JSON建立無限級AJAX動態(tài)加載的功能模塊樹
- Ajax實現(xiàn)動態(tài)加載組合框的實例代碼
相關(guān)文章
jQuery插件實現(xiàn)多級聯(lián)動菜單效果
開發(fā)一個jQuery插件實現(xiàn)多級聯(lián)動菜單效果,實現(xiàn)步驟很詳細,感興趣的小伙伴們可以參考一下2015-12-12JQuery入門——事件切換之toggle()方法應(yīng)用介紹
在toggle()方法中,可以依次調(diào)用N個指定的函數(shù),直到最后一個函數(shù),然后重復(fù)對這個函數(shù)輪番調(diào)用,在函數(shù)之間切換調(diào)用的時候相當?shù)姆奖?接下來將會詳細介紹toggle()方法的使用,感興趣的你可不要錯過了啊2013-02-02Tab頁界面,用jQuery及Ajax技術(shù)實現(xiàn)
從桌面開發(fā)的時代開始,Tab頁就是一個優(yōu)異的界面布局形式,兼有菜單的樣式和充分復(fù)用有限的界面的優(yōu)點。2009-09-09利用jQuery插件imgAreaSelect實現(xiàn)獲得選擇域的圖像信息
本篇文章主要對jQuery插件imgAreaSelect實現(xiàn)獲得選擇域的圖像信息的方法做了簡要分析說明。需要的朋友來看下吧,希望對大家有所幫助2016-12-12JQuery對id中含有特殊字符的轉(zhuǎn)義處理示例
id中包含其他特殊字符比如 /@ 等為了利用jquery獲取該元素需要轉(zhuǎn)義特殊字符,具體實現(xiàn)如下,感興趣的朋友可以參考下2013-09-09jQuery Mobile操作HTML5的常用函數(shù)總結(jié)
jQuery Mobile是針對移動端開發(fā)的JavaScript框架,正如其名基于jQuery庫,jQuery Mobile主要被用來操作HTML5設(shè)計頁面UI,下面就來看一下jQuery Mobile操作HTML5的常用函數(shù)總結(jié):2016-05-05