使用ajax+jqtransform實現(xiàn)動態(tài)加載select
今天在工作的時候遇到一個問題,頁面中公司名稱是在項目名稱選擇后用ajax讀取出來的。但是jqtransform是在頁面加載完成后調(dià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讓WordPress動態(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)文章
JQERY limittext 插件0.2版(長內(nèi)容限制顯示)
JQERY limittext 插件為長內(nèi)容增加一個顯示更多的功能2010-08-08
jQuery插件Tooltipster實現(xiàn)漂亮的工具提示
Tooltipster是一個jQuery插件用于快速創(chuàng)建HTML5校驗并且靈活的Tooltips。它可以通過CSS來改變外觀,箭頭的位置之后,鼠標,延遲/期間的外觀都可以被定義。2015-04-04
jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果示例
這篇文章主要介紹了jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果,涉及jQuery結(jié)合時間函數(shù)動態(tài)設(shè)置元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
解決jquery的datepicker的本地化以及Today問題
解決jquery的datepicker的本地化以及Today問題,需要的朋友可以參考下2012-05-05

