Jquery chosen动态设置值实例介绍

2024-12-11 19:27:25

Jquery chosen 地址：https://github.com/harvesthq/chosen
一款选择插件，支持检索，多选，但不支持输入效果如下图

确定是用的这个哦，不然可往下看也没有什么意义了
突然发现如果用在省市选择发现有如下问题：
1，不能动态设置值
2，不能动态设置选中
看了好几遍API愣是米有发现有方法可以直接调用。没办法就看源码，发现在其初始化的时候有一个判断如下图：

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

代码如下:

<SPAN style="WHITE-SPACE: pre"> </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 style="WHITE-SPACE: pre"> </SPAN>$("#city").val("上海");
$("#city").chosen({
no_results_text : "未找到此选项!",
width:"70%"
});

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

Chosen 基于jquery的选择框插件使用方法

Chosen插件下载地址 http://www.jb51.net/jiaoben/38027.html 复制代码代码如下: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="chosen/chosen.jquery.js&qu
jQuery中Chosen三级联动功能实例代码

Chosen 是一个JavaScript插件,它能让丑陋的.很长的select选择框变的更好看.更方便,不仅如此,它更扩大了,增长了主动筛选的功能. 本文介绍Chosen联动,具体代码如下: var addressResolve = function (options) { //检测用户传进来的参数是否合法 if (!isValid(options)) return this; //默认参数 var defaluts = { proId: 'divProv', cityId: 'divCity'
Jquery chosen动态设置值实例介绍

Jquery chosen 地址:https://github.com/harvesthq/chosen 一款选择插件,支持检索,多选,但不支持输入效果如下图确定是用的这个哦, 不然可往下看也没有什么意义了突然发现如果用在省市选择发现有如下问题: 1,不能动态设置值 2,不能动态设置选中看了好几遍API愣是米有发现有方法可以直接调用.没办法就看源码,发现在其初始化的时候有一个判断如下图: 发现有个destroy是不是("#city).chosen("destroy"
jQuery表单设置值的方法

本文实例为大家分享了jQuery如何表单设置值的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.3.min.js"></script> <
jquery实现动态菜单的实例代码

jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多,都是采用JavaScript操作css的方式. 其具体步骤可以分为以下几步: •创建一个含有要表达的菜单的html页面复制代码代码如下: <html> <head> <title>jquery示例2:jquery菜单</title> <meta http-equiv="Content-Type" content="text/html; ch
jquery获取img的src值实例介绍

简简单单的一句话,如下: <img id="img" src="1.jpg" alt="test" /> 引用的jquery如下: <script type="text/javascript" language="javascript" src="~/Js/jquery-1.2.6.js"></script> <script type="
Jquery获取radio选中值实例总结

Radio 1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").val(); $("input[name='rd']:checked").val(); 2.设置第一个Radio为选中值: $('input:radio:first').attr('checked', 'checked'); 或者 $('input:radio:first').attr('ch
jquery操作select取值赋值与设置选中实例

本节内容: jquery实现select下拉框的取值与赋值,设置选中的方法大全. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr("
jQuery使用之设置元素样式用法实例

本文实例讲述了jQuery使用之设置元素样式用法.分享给大家供大家参考.具体分析如下: css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面文章中有使用过 addClass()为元素添加css样式风格.这里主要介绍jQuery如何设置页面的样式风格.包括添加.删除.动态切换等. 1. 添加.删除css类别. 复制代码代码如下: $(function() { //同时添加多个CSS类别 $("img").addClass("css
Bootstrap jquery.twbsPagination.js动态页码分页实例代码

Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.
使用jQuery动态设置单选框的选中效果

一.需要实现的效果这里使用jQuery来实现.需要实现的效果如下:当下拉条改变时,单选框选中的值随之变化. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>动态设置单选框的选中</title>  </head&
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

1. 测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 1.2. 实践 HTML代码片段 <div class="container-fluid"> <div class="row">  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> <div class

Jquery chosen动态设置值实例介绍

相关推荐

随机推荐