在做一个编辑对话框时,要对里面带有select option的操作。主要是想动态加载option和对option的选中。但是由于项目中使用了jquery里的chosen()方法,怎么也无法实现效果。原码如下:
<select id="viewOLanguage" data-rel="chosen"> <option value="zh">简体中文(简体中文 Chinese)</option> <option value="en">English(英语 English)</option> <option value="fr">français(法语 French)</option> <option value="de">Deutsch(德语 German)</option> <option value="it">italiano(意大利语 Italian)</option> <option value="es">español(西班牙语 Spanish)</option> <option value="ru">русский(俄语 Russian)</option> <option value="ja">日本語(日语 Japanese)</option> <option value="ko">한국어(韩语 Korean)</option> </select> <select id="tLanguage" multiple="multiple" data-rel="chosen" style="width: 80%" > <option value="zh">简体中文(简体中文 Chinese)</option> <option value="en">English(英语 English)</option> <option value="fr">français(法语 French)</option> <option value="de">Deutsch(德语 German)</option> <option value="it">italiano(意大利语 Italian)</option> <option value="es">español(西班牙语 Spanish)</option> <option value="ru">русский(俄语 Russian)</option> <option value="ja">日本語(日语 Japanese)</option> <option value="ko">한국어(韩语 Korean)</option> </select>
在引用的js文件中使用了这样的代码:
//chosen - improves select $('[data-rel="chosen"],[rel="chosen"]').chosen();
然后在自己的私有js文件中怎么对select进行任何操作都没有效果:
// $("#viewTLanguage option: selected").attr("value", language); $("#viewTLanguage option[value='"+language+"']").attr("selected","selected"); jquery.append(option);
于是在网上寻找一些解决办法,偶然看了几篇文章,顿时好像明白一点什么。
其实完全可以在使用jquery的chosen()方法前进行操作,然后再进行chosen的方法。
$("#viewOLanguage option[value='"+oLanguage+"']").attr("selected","selected"); $("#viewOLanguage").chosen();
并且在select中去掉“data-rel="chosen"”,这样一来,就能实现select相应项的选中了,同样,append方法也会效果。
在网上还有一种说法是使用$("#jquery").chonse("destroy"),我也试了下,不过没有成功。
另外还可以试试这个:
jQuery Chosen.destroy().init()
重新实例化的方法。
ps:这篇文章之前有不完善的地方,所说的解决办法只解决了初始问题,却没有考虑到后续加载的事情。所以 ,还需要用这段代码:
$("#dialogOLanguage").trigger("liszt:updated");
或者是新版本的中的
$("#dialogOLanguage").trigger("chosen:updated");
这样可以解决同一select不断动态加载的问题。
另,destroy的方法还是没有实验成功。
相关推荐
Jquery chosen 地址:https://github.com/harvesthq/chosen 一款选择插件,支持检索,多选,但不支持输入效果如下图 确定是用的这个哦, 不然可往下看也没有什么意义了 突然发现如果用在省市选择发现有如下问题: 1...
Jquery select 插件 select
ajax-chosen, 添加了ajax自动完成功能的jQuery库的补充 选择的... 选择向 select 元素添加搜索框,所以我觉得它可以在awesomely动态表单中添加ajax自动完成。这里脚本引导现有的插件,而不对原始代码进行任何修改。 最
主要是通过jquery chosen插件,实现select多选的美化效果,该控件使用简单
jquery chosen
chosen_v1.2.0.zip ...jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索,多个标签编辑等功能 下载地址:https://github.com/harvesthq/chosen/releases
选择框需要引入资源文件 select chosen jquery min js
chosen jquery带搜索的下拉框简单整理,代码简单,易读,易懂
jQuery 插件编写的select三级联动,多级联动,修改方便,扩展方便
jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。 同时我修改了一下英文注释。 修复了中文名称下搜索的BUG。
chosen源码 chosen-1.2.0...jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索,多个标签编辑等功能 下载地址:https://github.com/harvesthq/chosen/releases
Chosen 基于jquery的Select选择框的华丽变身.zip
这个是jquery的下拉框插件,可以实现下拉框内模糊搜索的功能
chosen-jquery.js 版本1.8.7 一个可以美化下拉框,并且支持模糊查询的下拉框搜索jquery插件 下载地址 https://github.com/harvesthq/chosen/releases 官方文档配置 https://harvesthq.github.io/chosen/options.html...
在jQuery基础上,美化select,自定义函数,不影响原先取值和增删改的操作
jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示: 相比最原始的版本,美化后的选择插件可以说是很漂亮了且功能更加强大(这里不说了,自行发掘吧)。这里主要是添加了它的特有属性并调用 class=”...
Chosen:select下拉选择框美化插件及实现模糊搜索,Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此,它更扩展了select,增加了自动筛选的功能。它...