使用ajax+jqtransform實(shí)現(xiàn)動(dòng)態(tài)加載select
今天在工作的時(shí)候遇到一個(gè)問(wèn)題,頁(yè)面中公司名稱是在項(xiàng)目名稱選擇后用ajax讀取出來(lái)的。但是jqtransform是在頁(yè)面加載完成后調(diào)用的,所以導(dǎo)致了公司名稱下拉框無(wú)法展示最新的數(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)在頁(yè)面加載后已經(jīng)調(diào)用過(guò)jqTransform方法, jqTransformSelectWrapper里面的ul數(shù)據(jù)沒(méi)有更新。想了許久決定用簡(jiǎn)單粗暴的方法把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="">--請(qǐng)選擇--</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。方法比較蠢,不過(guò)先用著吧,以后有更好的辦法再說(shuō)。

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

