jquery chosen动态设置值

不念不忘少年蓝@ 2022-05-14 10:28 202阅读 0赞

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

1，不能动态设置值

2，不能动态设置选中

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

![20130808135433218][]

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

首先解决第一个问题

$("#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设置值再用初始化下拉框，代码如下：

$("#city").val("上海");
    	$("#city").chosen({
    		no_results_text : "未找到此选项!",
    		width:"70%"
    	});

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

![70][]

参考：[https://www.xuebuyuan.com/2095669.html][https_www.xuebuyuan.com_2095669.html]

[https://blog.csdn.net/datouniao1/article/details/78611542][https_blog.csdn.net_datouniao1_article_details_78611542]

[20130808135433218]: https://xuebuyuan.icrazy.men/https://img-blog.csdn.net/20130808135433218
[70]: /images/20220514/b88a6605039d4df3a240e678b2b67c2b.png
[https_www.xuebuyuan.com_2095669.html]: https://www.xuebuyuan.com/2095669.html
[https_blog.csdn.net_datouniao1_article_details_78611542]: https://blog.csdn.net/datouniao1/article/details/78611542