Jquery chosen动态设置值 select Ajax动态加载数据 设置chosen和获取他们选中的值
2015-03-18 17:13
603 查看
在做一个编辑对话框时,要对里面带有select option的操作。主要是想动态加载option和对option的选中。但是由于项目中使用了jquery里的chosen()方法,怎么也无法实现效果。原码如下:
Java代码
<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 v
4000
alue="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文件中使用了这样的代码:
Js代码
//chosen - improves select
$('[data-rel="chosen"],[rel="chosen"]').chosen();
然后在自己的私有js文件中怎么对select进行任何操作都没有效果:
Js代码
// $("#viewTLanguage option: selected").attr("value", language);
$("#viewTLanguage option[value='"+language+"']").attr("selected","selected");
jquery.append(option);
于是在网上寻找一些解决办法,偶然看了几篇文章,顿时好像明白一点什么。
其实完全可以在使用jquery的chosen()方法前进行操作,然后再进行chosen的方法。
Js代码
$("#viewOLanguage option[value='"+oLanguage+"']").attr("selected","selected");
$("#viewOLanguage").chosen();
并且在select中去掉“data-rel="chosen"”,这样一来,就能实现select相应项的选中了,同样,append方法也会效果。
在网上还有一种说法是使用$("#jquery").chonse("destroy"),我也试了下,不过没有成功。
另外还可以试试这个:
Js代码
jQuery Chosen.destroy().init()
重新实例化的方法。
ps:这篇文章之前有不完善的地方,所说的解决办法只解决了初始问题,却没有考虑到后续加载的事情。所以 ,还需要用这段代码:
Js代码
$("#dialogOLanguage").trigger("liszt:updated"); //项目中可以使用
或者是新版本的中的
Js代码
$("#dialogOLanguage").trigger("chosen:updated"); //可能是因为只能在新版本中使用的原因,项目中没效果
这样可以解决同一select不断动态加载的问题。
另,destroy的方法还是没有实验成功。
Java代码
<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 v
4000
alue="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文件中使用了这样的代码:
Js代码
//chosen - improves select
$('[data-rel="chosen"],[rel="chosen"]').chosen();
然后在自己的私有js文件中怎么对select进行任何操作都没有效果:
Js代码
// $("#viewTLanguage option: selected").attr("value", language);
$("#viewTLanguage option[value='"+language+"']").attr("selected","selected");
jquery.append(option);
于是在网上寻找一些解决办法,偶然看了几篇文章,顿时好像明白一点什么。
其实完全可以在使用jquery的chosen()方法前进行操作,然后再进行chosen的方法。
Js代码
$("#viewOLanguage option[value='"+oLanguage+"']").attr("selected","selected");
$("#viewOLanguage").chosen();
并且在select中去掉“data-rel="chosen"”,这样一来,就能实现select相应项的选中了,同样,append方法也会效果。
在网上还有一种说法是使用$("#jquery").chonse("destroy"),我也试了下,不过没有成功。
另外还可以试试这个:
Js代码
jQuery Chosen.destroy().init()
重新实例化的方法。
ps:这篇文章之前有不完善的地方,所说的解决办法只解决了初始问题,却没有考虑到后续加载的事情。所以 ,还需要用这段代码:
Js代码
$("#dialogOLanguage").trigger("liszt:updated"); //项目中可以使用
或者是新版本的中的
Js代码
$("#dialogOLanguage").trigger("chosen:updated"); //可能是因为只能在新版本中使用的原因,项目中没效果
这样可以解决同一select不断动态加载的问题。
另,destroy的方法还是没有实验成功。
相关文章推荐
- Jquery chosen动态设置值实例介绍 select Ajax动态加载数据 设置chosen和获取他们选中的值
- easyui combobox 动态加载数据并回显选中 ,设置宽度和高度自动适应
- highcharts click事件获取数据传给datagrid ,动态加载数据
- loadRunner12 设置关联 获取服务端动态数据
- iphone开发中使用动态库(dylib)和动态加载framework (获取iphone的IMSI和设置飞行模式)
- echarts画圆环统计图并加载动态数据 (ajax获取数据)
- iphone开发中使用动态库(dylib)和动态加载framework (获取iphone的IMSI和设置飞行模式) .
- iphone开发中使用动态库(dylib)和动态加载framework(iphone获取IMSI和设置飞行模式)
- DotNetBar 中 SuperGridControl 加载数据、获取数据、设置样式
- easyui combobox动态加载数据和设置默认值
- 获取已加载完成的下拉框的所有值,并动态给option设置selected
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题
- iphone开发中使用动态库(dylib)和动态加载framework (获取iphone的IMSI和设置飞行模式)
- android-listview 设置初始选中位置为非0时, 会出现加载数据后从位置0 再跳转到指定位置的原因
- python3 网络爬虫(二)利用get请求获取网页的动态加载数据
- DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
- Android Trick 3: GridView动态加载数据情况下,选中状态的实现
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题
- Ext.form.ComboBox 动态加载数据后设置下拉选项
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题