为了美化select的显示效果,决定使用chosen来渲染体验。
因为页面中的select的option都是通过handlerbars动态的生成,所以导致options动态的改变时,chosen不能实时的刷新,停留在上一刻,影响用户体验。查询官方的api,只有通过$('#test').chosen('destroy').chosen();销毁一次再重建一次才可以正常的显示,但是如果这样写,导致页面到处是这样的垃圾代码-丑且脏, 因为有时还要判断出什么时候使用$('#test').chosen({})。于是写一个jquery的插件,来简单地封装下chosen地api,支持我们的场景。
/** * 到处是chosen和chosen('destroy').chosen? * 我们要思考root casuse? * 根本原因是因为使用handlerbars动态生成的select的内容 * 导致chosen无法同步刷新,那我们为何不自己扩展呢? */ (function($) { /** * 创建动态的chosen插件 * --智能判断chosen有没有加载 * @param param * param为destroy就为销毁该chosen * param为“”, 表示option不是动态的生成的,页面已经渲染了options * 其他的都是为动态生成的options html片段 */ $.fn.dynamicChosen = function(param) { //简单地设置chosen属性 var opt = { disable_search_threshold: 10, no_results_text: ':),暂无匹配' }; return this.each(function() { //得到当前的元素id,chosen的id会在元素的id基础上添加_chosen var id = $(this).prop('id'); var $chosenId = $('#' + id + '_chosen'); if (param == 'destroy') { //如果没有渲染chosen,说明就是普通的select直接隐藏 if ($chosenId.length == 0) { $(this).hide(); } else { $(this).chosen('destroy').hide(); } } else { //如果chosen没有在页面渲染 if ($chosenId.length == 0) { //trim(param)说明option非动态生成 if ($.trim(param)) { $(this).html(param).show().chosen(opt); } else { $(this).show().chosen(opt); } } else { if ($.trim(param)) { $(this).html(param).show().chosen('destroy').chosen(opt); } else { $(this).html(param).show().chosen('destroy').chosen(opt); } } } }); } })(jQuery);
使用: //销毁 $("#test").dynamicChosen('destroy') //渲染已经存在的select和option $("#test").dynamicChosen(); //动态的渲染 var tpl = function (templateId, data) { var template = Handlebars.compile($(templateId).html()); return template(data); }; $("#test").dynamicChosen(tpl('#test-tpl', {list: {..}}));
相关推荐
接下来,使用jQuery动态生成城市选项。我们可以将城市数据存储在JSON对象中,然后遍历数据,根据省份选择的结果动态填充城市选项: ```javascript var cityData = { "省份1": ["城市1", "城市2"], "省份2": [...
newWndProc就是窗口过程只要是该类的实例生成的窗口都使用该窗口过程。 所以了解了Windows的消息机制在加上对消息映射的理解就很容易了解MFC开发的基本思路了。 1.4 利用MFC进行开发的通用方法介绍 以下是我在最初...
技术运维-机房巡检表及巡检说明
第四次算法分析与设计整理
图像处理项目实战
该资源为jaxlib-0.4.18-cp311-cp311-macosx_11_0_arm64.whl,欢迎下载使用哦!
搭建说明. 运行环境 php5.6 mysql5.6 扩展sg11 前置条件: 前后端分离,需要准备两个域名,一个后台域名,一个前端域名 后端源码修改(cs2.ijiuwu.com批量替换改为你的后端域名)数据库修改(cs3.ijiuwu.com批量替换为你的前端域名)1、创建后台站点,上传后台源码并解压到根目录2、创建前端站点,上传前端源码并解压到根目录 3、创建数据库上传并导入数据库文件 4、修改数据库信息: 后台:app/database.php 前端:application/database.php 前端站点设置 伪静态thinkphp 运行目录public 关闭防跨站 访问后台域名/admin.php进入后台管理 admin 123456 系统-》系统设置-》附件设置-》Web服务器URL 改为你的前端域名 系统-》清前台缓存 改为你的前端域名 点击刷新缓存
【毕业答辩】爆款黑板风教育文艺毕业论文答辩通用模板.pptx
1、文件内容:systemd-devel-219-78.el7_9.9.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/systemd-devel-219-78.el7_9.9.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊
win32汇编环境,对 WM-MOUSEMOVE 消息的理解
车牌识别项目
UE项目开发过程中的一些快捷脚本
lab1的words.txt文件
python、yolo、pytorch
人工智能、大语言模型相关学习资料
图像处理项目实战
python、yolo、pytorch
车牌识别项目
该资源为jaxlib-0.4.18-cp312-cp312-macosx_10_14_x86_64.whl,欢迎下载使用哦!
python、yolo、pytorch