【jquery】Chosen.jquery.js 插件动态加载数据问题

Chosen.jquery.js目前版本v1.6.2，官方文档链接https://harvesthq.github.io/chosen/

插件有一个css文件和一个js文件，都命名为Chosen，引入之后，在自己的js文件中调用.chosen()方法即可。

<select class="chosen-select" data-placeholder="选择选项" style="width:150px"><option value=-1></option><option value="选项一">选项一</option><!--选项有多少写多少-->

</select>

说明：如果要显示placeholder里的内容，那第一个选项要为空，value=-1就好了。
写好select之后就在对应的js文件里书写

$('.chosen-select').chosen();

如果要设置参数，可以这么写：

$('.chosen-select').chosen({no_results_text: "这是搜索无果的提示信息!",disable_search_threshold: 10,//选项小于10时不显示搜索框max_selected_options: 5//多选情况下最多能选5个
});

多选时select标签多加一个multiply属性即可。单选时还可以设置其他chosen()方法的参数，这里不详述了。

关于异步动态加载选项数据导致的下拉列表为空的问题

对照文档给出的示例的原html文件和火狐浏览器开发者模式下看到的页面加载后的html文件，就会发现Chosen插件将原select标签隐藏了（display:none），同级多了一个div，这里放了两个ul标签，一个用来放input标签（搜索框），另一个用来把select标签中的options都读过来，写在li中。使用时真正被下拉展示的是这个div里的内容。

我写的时候用$.getJSON(url,[data],[function])这个方法进行调用，function中将获取的data用循环写在select的option中。因为初次使用的关系，以为和AJAX不同，毕竟这里没有看到设置同步还是异步的选项。于是在使用了Chosen插件后出错。能够在开发者模式下查看到html被更改的元素，select虽然隐藏，但其中的option确实填充了。而且两个ul也全部在，只是第二个ul中没有li。

后来用console.log()方法来查看执行顺序，虽然$.getJSON方法我写在js文件头部，$('.chosen-select').chosen()写在文件尾部，但执行时仍然先执行.chosen()前的console.log()方法再执行$.getJSON()的function中的console.log()方法。

我的解决办法是：把$('.chosen-select').chosen()写在$.getJSON()的function中，在填充完option选项之后，调用对应的chosen()方法，此时页面再点击下拉就不会有问题了。

目前我只有这种方法，但如果大家有其他的解决方法，希望能留言告诉我，谢谢。

【jquery】Chosen.jquery.js 插件动态加载数据问题相关推荐

js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
Bootstrap弹出框（Popover）插件动态加载数据
效果鼠标点击输入框弹出提示内容,内容是根据输入的字符动态加载的,效果如图: HTML <input type="text" class="form-control ...
JS ListBox动态加载数据
因项目需要,需要从listbox取出部分信息进行加载.原理为当body初始化时将全部数据保存到一个隐藏的listbox中,通过在body指定onload执行的函数.当用户选择部门时,首先将所有的数据项 ...
swiper支持动态加载数据
用swiper插件动态加载数据:动态获取完数据之后,在初始化swiper. 1.在<head>标签里面加入swiper的css和js文件 <link rel="styles ...
使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题
使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题参考文章: (1)使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 ( ...
html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
Unity3D的uniSWF插件动态加载SWF UI资源
uniSWF能把Flash的素材像用AS3编程类似,只不过环境要在C#或者JS中编程.要是想创建一个类似Menu菜单或者像导航一样的菜单,在Unity中首先要选择摄像机,给摄像机添加MovieClip ...
python爬取js加载的数据_JS动态加载数据不会爬？老司机教你两个方法爬取想要的数据...
学习Python的人绝大部分都是在用Python做爬虫,毕竟对于爬虫而言Python是不二选. 但是一般简单的静态页面网站还是很好爬取的,对于很多动态加载的网站就不知道怎么办了,今天小编就给大家介绍两 ...
js的动态加载、缓存、更新以及复用（四）
本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...

【jquery】Chosen.jquery.js 插件动态加载数据问题

关于异步动态加载选项数据导致的下拉列表为空的问题

【jquery】Chosen.jquery.js 插件动态加载数据问题相关推荐

最新文章

热门文章