Home >Web Front-end >JS Tutorial >Use ajax jqtransform to dynamically load select_jquery

Use ajax jqtransform to dynamically load select_jquery

WBOY
WBOYOriginal
2016-05-16 16:29:481291browse

I encountered a problem at work today. The company name on the page was read using ajax after the project name was selected. However, jqtransform is called after the page is loaded, so the company name drop-down box cannot display the latest data.

<link rel="stylesheet" href="${ctx}/jqtransformplugin/jqtransform.css" type="text/css"></link> <br /><script type="text/javascript" src="${ctx}/jqtransformplugin/jquery.jqtransform.js"></script> <br /><SCRIPT type="text/javascript"> <br />        $(function(){ <br />            $('form').jqTransform({imgPath:'images/JQueryformimg/'}); <br />        }); <br /></SCRIPT>

Using firebug, you can see that the data has actually been spliced, but the form has called the jqTransform method after the page is loaded, and the ul data in jqTransformSelectWrapper has not been updated. After thinking for a long time, I decided to update ul using a simple and crude method.

    function companyAjax(proid){ <br />        $.ajax({  <br />            type:"POST", <br />            <a href=""${pageContext.request.contextPath}/recordsearch/ajax/getCompanyAjax.do">url:"${pageContext.request.contextPath}/recordsearch/ajax/getCompanyAjax.do</a>", <br />            dataType:"json", <br />            data:{proid : proid}, <br />            success:function(jsondata){ <br />                var tmp=''; <br />                tmp+='<select id="centerid" name="centerid" onchange="comChange()" style="width: 160px;" name="centerid">'; <br />                //$("#centerid").empty();                tmp+='<option value="">--请选择--</option>'; <br />                for(var i=0;i<jsondata.length;i++){ <br />                    tmp+='<option value="'+jsondata[i].centerid+'">'+jsondata[i].centername+'</option>'; <br />                } <br />                tmp+='</select>'; <br />                $("#centerid").parent().remove(); <br />                $("#comLable").after(tmp); <br />                $("#centerid").jqTransSelect(); <br />            } <br />        }); <br />    }

Haha, after querying the company data with ajax, delete the select-related div generated by jqtransform, then splice the select, and then re-initialize the select. The method is rather stupid, but let’s use it for now, and we’ll find a better way later.

Isn’t it cool? . Haha, actually jqtransform is more powerful. If you need to use similar effects in the future, you can refer to it.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn