使用ajax+jqtransform實(shí)現(xiàn)動(dòng)態(tài)加載select
今天在工作的時(shí)候遇到一個(gè)問題,頁面中公司名稱是在項(xiàng)目名稱選擇后用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ù)其實(shí)已經(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。方法比較蠢,不過先用著吧,以后有更好的辦法再說。

是不是很炫酷。。哈哈,其實(shí)還是jqtransform比較給力,小伙伴們以后需要使用類似效果的話,可以參考下。
- AJAX和jQuery動(dòng)態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法
- DataTables+BootStrap組合使用Ajax來獲取數(shù)據(jù)并且動(dòng)態(tài)加載dom的方法(排序,過濾,分頁等)
- 使用PHP+AJAX讓W(xué)ordPress動(dòng)態(tài)加載文章的教程
- jQuery結(jié)合ajax實(shí)現(xiàn)動(dòng)態(tài)加載文本內(nèi)容
- php+ajax實(shí)現(xiàn)無刷新動(dòng)態(tài)加載數(shù)據(jù)技術(shù)
- Ajax動(dòng)態(tài)加載數(shù)據(jù)庫示例
- 用ajax動(dòng)態(tài)加載需要的js文件
- 利用Dojo和JSON建立無限級AJAX動(dòng)態(tài)加載的功能模塊樹
- Ajax實(shí)現(xiàn)動(dòng)態(tài)加載組合框的實(shí)例代碼
相關(guān)文章
jQuery實(shí)現(xiàn)點(diǎn)擊水紋波動(dòng)動(dòng)畫
今天要為大家紹一款由jquery實(shí)現(xiàn)的鼠標(biāo)單擊出現(xiàn)水波特效。用鼠標(biāo)點(diǎn)擊頁面,你可以看到頁面不斷出面水波紋效果。然后水波紋漸漸消失。效果非常不錯(cuò)2016-04-04
jQuery插件實(shí)現(xiàn)多級聯(lián)動(dòng)菜單效果
開發(fā)一個(gè)jQuery插件實(shí)現(xiàn)多級聯(lián)動(dòng)菜單效果,實(shí)現(xiàn)步驟很詳細(xì),感興趣的小伙伴們可以參考一下2015-12-12
JQuery入門——事件切換之toggle()方法應(yīng)用介紹
在toggle()方法中,可以依次調(diào)用N個(gè)指定的函數(shù),直到最后一個(gè)函數(shù),然后重復(fù)對這個(gè)函數(shù)輪番調(diào)用,在函數(shù)之間切換調(diào)用的時(shí)候相當(dāng)?shù)姆奖?接下來將會(huì)詳細(xì)介紹toggle()方法的使用,感興趣的你可不要錯(cuò)過了啊2013-02-02
Tab頁界面,用jQuery及Ajax技術(shù)實(shí)現(xiàn)
從桌面開發(fā)的時(shí)代開始,Tab頁就是一個(gè)優(yōu)異的界面布局形式,兼有菜單的樣式和充分復(fù)用有限的界面的優(yōu)點(diǎn)。2009-09-09
利用jQuery插件imgAreaSelect實(shí)現(xiàn)獲得選擇域的圖像信息
本篇文章主要對jQuery插件imgAreaSelect實(shí)現(xiàn)獲得選擇域的圖像信息的方法做了簡要分析說明。需要的朋友來看下吧,希望對大家有所幫助2016-12-12
Jquery實(shí)現(xiàn)圖片左右自動(dòng)滾動(dòng)示例
圖片左右滾動(dòng)的效果想必大家都有見到過吧,其實(shí)很簡單。在本文將為大家介紹下使用Jquery是如何實(shí)現(xiàn)圖片左右自動(dòng)滾動(dòng)的,感興趣的朋友可以參考下2013-09-09
JQuery對id中含有特殊字符的轉(zhuǎn)義處理示例
id中包含其他特殊字符比如 /@ 等為了利用jquery獲取該元素需要轉(zhuǎn)義特殊字符,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-09-09
jQuery Mobile操作HTML5的常用函數(shù)總結(jié)
jQuery Mobile是針對移動(dòng)端開發(fā)的JavaScript框架,正如其名基于jQuery庫,jQuery Mobile主要被用來操作HTML5設(shè)計(jì)頁面UI,下面就來看一下jQuery Mobile操作HTML5的常用函數(shù)總結(jié):2016-05-05

