使用ajax+jqtransform实现动态加载select


Posted in Javascript onDecember 01, 2014

今天在工作的时候遇到一个问题,页面中公司名称是在项目名称选择后用ajax读取出来的。但是jqtransform是在页面加载完成后调用的,所以导致了公司名称下拉框无法展示最新的数据。

<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>

使用ajax+jqtransform实现动态加载select

使用ajax+jqtransform实现动态加载select

使用ajax+jqtransform实现动态加载select

用firebug可以看到数据其实已经拼接上去了,但是form已经在页面加载后已经调用过jqTransform方法, jqTransformSelectWrapper里面的ul数据没有更新。想了许久决定用简单粗暴的方法把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查询公司数据之后,将jqtransform生成的select相关的div删除掉,然后把selct拼接上,再重新初始化select。方法比较蠢,不过先用着吧,以后有更好的办法再说。

使用ajax+jqtransform实现动态加载select

是不是很炫酷。。哈哈,其实还是jqtransform比较给力,小伙伴们以后需要使用类似效果的话,可以参考下。

Javascript 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
js实现div弹出层的方法
Nov 20 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 #Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 #Javascript
Javascript学习指南
Dec 01 #Javascript
Javascript模块化编程详解
Dec 01 #Javascript
浅谈Javascript中深复制
Dec 01 #Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 #Javascript
关于javascript模块加载技术的一些思考
Nov 28 #Javascript
You might like
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
php的一些小问题
2010/07/03 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
Vue指令指令大全
2019/02/09 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
宾馆总经理岗位职责
2014/02/14 职场文书
干部考核评语
2014/04/29 职场文书
护士节策划方案
2014/05/19 职场文书
服装设计专业自荐信
2014/06/17 职场文书
初二学生评语大全
2014/12/26 职场文书
服务行业标语口号
2015/12/26 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs