您的位置:首页 > Web前端 > JQuery

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的方法还是没有实验成功。

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery chosen
相关文章推荐