使用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 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
express异步函数异常捕获示例详解
Nov 30 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桌面中心(一) 创建数据库
2007/03/11 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python实现把数字转换成中文
2015/06/29 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python中的tcp示例详解
2018/12/09 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
学生会主席事迹材料
2014/01/28 职场文书
岗位职责的构建方法
2014/02/01 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
员工福利申请报告
2015/05/15 职场文书
纪律委员竞选稿
2015/11/19 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫