手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Jquery chosen动态设置值实例介绍
Jquery chosen动态设置值实例介绍
摘要:Jquerychosen地址:https://github.com/harvesthq/chosen一款选择插件,支持检索,多选,但不支持输...

Jquery chosen 地址:https://github.com/harvesthq/chosen

一款选择插件,支持检索,多选,但不支持输入效果如下图

1

确定是用的这个哦, 不然可往下看也没有什么意义了

突然发现如果用在省市选择发现有如下问题:

1,不能动态设置值

2,不能动态设置选中

看了好几遍API愣是米有发现有方法可以直接调用。没办法就看源码,发现在其初始化的时候有一个判断如下图:

2

发现有个destroy是不是("#city).chosen("destroy");就可以了呢。把猜想试了一下果然可以。在这之前调试过其生成的dom想通过直接将其生成的dom移除掉,结果是不可行的,能移除掉,但是就再也无法初始化了。浪费了二三个小时哇。

首先解决第一个问题

复制代码 代码如下:

<SPAN> </SPAN>$("#province").change(function(){

$("#city").html("");

$("#city").chosen("destroy");

$("<option value='-1'>-全部-</option>").appendTo("#city");

$.getJSON("${ctx}/api/getCityByProvinceJson.jsp",{

province:$("#province").val()

},function(data){

$.each(data,function(i){

$("<option value='"+data[i].city+"'>"+data[i].city+"</option>").appendTo("#city");

});

$("#city").attr("multiple",true);

$("#city").chosen({

no_results_text : "未找到此选项!",

width:"70%"

});

});

});

$("#city").chosen({

no_results_text : "未找到此选项!",

width:"70%"

});

这样便可动态设置值了,感觉代码有点重复,但是目前还没有找到比较好的方法

下面解决第二个问题

用法跟上面相似,先给select设置值再用初始化下拉框,代码如下:

复制代码 代码如下:

<SPAN> </SPAN>$("#city").val("上海");

$("#city").chosen({

no_results_text : "未找到此选项!",

width:"70%"

});

这样便可以动态设置选中了

【Jquery chosen动态设置值实例介绍】相关文章:

Jquery动态添加输入框的方法

JQuery中DOM事件合成用法实例分析

JQuery分屏指示器图片轮换效果实例

jQuery插件制作之全局函数用法实例

JQuery中DOM实现事件移除的方法

jquery实现动态改变div宽度和高度

JQuery中clone方法复制节点

jQuery插件制作之参数用法实例分析

javascript动态创建表格及添加数据实例详解

js实现简单锁屏功能实例

精品推荐
分类导航