博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery chosen动态设置值 select Ajax动态载入数据 设置chosen和获取他们选中的值
阅读量:5755 次
发布时间:2019-06-18

本文共 2076 字,大约阅读时间需要 6 分钟。

  在做一个编辑对话框时,要对里面带有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.   
  13.   
  14. <select id="tLanguage" multiple="multiple" data-rel="chosen" style="width: 80%" >  
  15.     <option value="zh">中文简体(中文简体 Chinese)</option>  
  16.     <option value="en">English(英语 English)</option>  
  17.     <option value="fr">français(法语 French)</option>  
  18.     <option value="de">Deutsch(德语 German)</option>  
  19.     <option value="it">italiano(意大利语 Italian)</option>  
  20.     <option value="es">español(西班牙语 Spanish)</option>  
  21.     <option value="ru">русский(俄语 Russian)</option>  
  22.     <option value="ja">日本語(日语 Japanese)</option>  
  23.     <option value="ko">한국어(韩语 Korean)</option>  
  24. </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.   
  4.          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的方法还是没有实验成功。

 

转载地址:http://vockx.baihongyu.com/

你可能感兴趣的文章
倒序显示数组(从右往左)
查看>>
LeetCode2_Evaluate Reverse Polish Notation评估逆波兰表达式(栈)
查看>>
文献综述二:UML技术在行业资源平台系统建模中的应用
查看>>
阿里云服务器 linux下载 jdk
查看>>
Swift 学习 用 swift 调用 oc
查看>>
第三章 Python 的容器: 列表、元组、字典与集合
查看>>
微信小程序开发 -- 点击右上角实现转发功能
查看>>
问题解决-Failed to resolve: com.android.support.constraint:constraint-layout:1.0.0-alpha7
查看>>
与MS Project相关的两个项目
查看>>
[转载]ASP.NET MVC Music Store教程(1):概述和新项目
查看>>
使用 SharpSvn 执行 svn 操作的Demo
查看>>
js函数大全
查看>>
iOS app exception的解决方案
查看>>
Mongodb启动命令mongod参数说明
查看>>
TCP&UDP压力测试工具
查看>>
oracle 导入数据
查看>>
Android 最简单的自定义Dialog之一
查看>>
磨刀不误砍柴 - 配置适合工作学习的桌面环境
查看>>
Java笔记-反射机制(一)
查看>>
redux v3.7.2源码解读与学习之 applyMiddleware
查看>>