Jquery chosen动态设置值 select Ajax动态加载数据 设置chosen和获取他们选中的值

在做一个编辑对话框时,要对里面带有select option的操作。主要是想动态加载option和对option的选中。但是由于项目中使用了jquery里的chosen()方法,怎么也无法实现效果。原码如下:

Java代码  

  1. <select id="viewOLanguage" data-rel="chosen">
  2. <option value="zh">简体中文(简体中文 Chinese)</option>
  3. <option value="en">English(英语 English)</option>
  4. <option value="fr">fran?ais(法语 French)</option>
  5. <option value="de">Deutsch(德语 German)</option>
  6. <option value="it">italiano(意大利语 Italian)</option>
  7. <option value="es">espa?ol(西班牙语 Spanish)</option>
  8. <option value="ru">русский(俄语 Russian)</option>
  9. <option value="ja">日本語(日语 Japanese)</option>
  10. <option value="ko">???(韩语 Korean)</option>
  11. </select>
  12. <select id="tLanguage" multiple="multiple" data-rel="chosen" style="width: 80%" >
  13. <option value="zh">简体中文(简体中文 Chinese)</option>
  14. <option value="en">English(英语 English)</option>
  15. <option value="fr">fran?ais(法语 French)</option>
  16. <option value="de">Deutsch(德语 German)</option>
  17. <option value="it">italiano(意大利语 Italian)</option>
  18. <option value="es">espa?ol(西班牙语 Spanish)</option>
  19. <option value="ru">русский(俄语 Russian)</option>
  20. <option value="ja">日本語(日语 Japanese)</option>
  21. <option value="ko">???(韩语 Korean)</option>
  22. </select>

在引用的js文件中使用了这样的代码:

Js代码

  1. //chosen - improves select
  2. $(‘[data-rel="chosen"],[rel="chosen"]‘).chosen();

然后在自己的私有js文件中怎么对select进行任何操作都没有效果:

Js代码

  1. //  $("#viewTLanguage option: selected").attr("value", language);
  2. $("#viewTLanguage option[value=‘"+language+"‘]").attr("selected","selected");
  3. jquery.append(option);

于是在网上寻找一些解决办法,偶然看了几篇文章,顿时好像明白一点什么。

其实完全可以在使用jquery的chosen()方法前进行操作,然后再进行chosen的方法。

Js代码

  1. $("#viewOLanguage option[value=‘"+oLanguage+"‘]").attr("selected","selected");
  2. $("#viewOLanguage").chosen();

并且在select中去掉“data-rel="chosen"”,这样一来,就能实现select相应项的选中了,同样,append方法也会效果。

在网上还有一种说法是使用$("#jquery").chonse("destroy"),我也试了下,不过没有成功。

另外还可以试试这个:

Js代码

  1. jQuery Chosen.destroy().init()

重新实例化的方法。

ps:这篇文章之前有不完善的地方,所说的解决办法只解决了初始问题,却没有考虑到后续加载的事情。所以 ,还需要用这段代码:

Js代码

  1. $("#dialogOLanguage").trigger("liszt:updated");  //项目中可以使用

或者是新版本的中的

Js代码

  1. $("#dialogOLanguage").trigger("chosen:updated");  //可能是因为只能在新版本中使用的原因,项目中没效果

这样可以解决同一select不断动态加载的问题。

另,destroy的方法还是没有实验成功。

时间: 2024-10-14 16:13:29

Jquery chosen动态设置值 select Ajax动态加载数据 设置chosen和获取他们选中的值的相关文章

淘宝购物车页面 智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

使用ajax异步加载数据

使用ajax异步加载数据 controller为User赋值 @RequestMapping("/a2") public List<User> a2() { List<User> userlist = new ArrayList<User>(); userlist.add(new User("大头儿子", 6, "男")); userlist.add(new User("小头爸爸", 30,

ajax(加载数据)

加载数据 1.xssj.php <script src="jquery-3.2.0.min.js"></script> <title>无标题文档</title> </head> <body> <h1>显示数据</h1> <select id="sel"> </select> <input type="button" val

Ajax异步加载数据及Redis缓存

针对网页分类条目的动态加载,图为页面的Head部分. //categoryListServlet准备分类数据 ProductService service = new ProductService(); List<Category> categoryList = service.findAllCategoryList(); response.setContentType("text/html; charset=utf-8"); Gson gson = new Gson();

Jquery chosen动态设置值 select Ajax动态载入数据 设置chosen和获取他们选中的值

? 在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态载入option和对option的选中.可是由于项目中使用了jquery里的chosen()方法.怎么也无法实现效果.原码例如以下: ? ? Java代码 ? <select?id="viewOLanguage"?data-rel="chosen">?? ????<option?value="zh">中文简体(中文简体?Chinese)&l

Select2插件ajax方式加载数据并刷新页面数据回显

今天在优化项目当中,有个要在下拉框中搜索数据的需求:最后选择使用selec2进行开发: 官网:http://select2.github.io/ 演示: 准备工作: 文件需要引入select2.full.js.select2.min.css(4.0.1版本)和jquery.1.8.3及以上 注意:最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用. HTML代码 <select id="c01-select" class="select2&

加载数据 设置图片圆角方法

[_iconView sd_setImageWithURL:[NSURL URLWithString:item.image_list] placeholderImage:[UIImage imageNamed:@"defaultUserIcon"] options:SDWebImageCacheMemoryOnly completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageUR

DataTables ajax重新加载数据

传数据给后台返回数据,最开始的办法是 重新生成一个datatable对象,但是在每次点击刷新时都会有闪动的现象,而且代价很高.理想中应该仅仅更新数据. 最后在文档中查到一个插件fnReloadAjax加入文件 $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw ) { if ( sNewSource !== undefined && s New

ajax异步加载问题

使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.