使用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 相关文章推荐
js 图片轮播(5张图片)
Dec 30 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
php自定义函数之递归删除文件及目录
2010/08/08 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
jquery tools之tooltip
2009/07/25 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
python通过索引遍历列表的方法
2015/05/04 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
品质主管的岗位职责
2013/12/04 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android