chosen.jquery.js 使用笔记
using chosen.jquery.js
using chosen.jquery.css
html:
<label for="MeetingUsersList" class="label"><strong class="fg-red">∗</strong> 参会人员</label>
<select data-placeholder="请选择参会人员..." id="MeetingUsersList" multiple="multiple" class="chosen-select form-control"></select>
<input type="hidden" id="MeetingUsers" placeholder="参会人员" name="MeetingUsers">
<input type="hidden" id="MeetingUsersName" placeholder="参会人员" name="MeetingUsersName">
<div class="field-validation-error" data-valmsg-for="MeetingUsersList" validata="MeetingUsers"></div>
j s:
$.ajax({
type: "post",
url: "/UserMeeting/MeetingUserList",//初始化下拉多选列表
global: false,
success: function (data) {
$('#MeetingUsersList').html(data);//绑定下拉值
//初始化
var chose = $("#MeetingUsersList").chosen({
no_results_text: "Sorry,未检索到相关数据!",
max_selected_options: 100,
width: "100%"
});
var aa = 1;
chose.trigger("liszt:updated");
chose.change(function (e, t) {
var selectedTitle = '';
var selected = '';
$("div[validata='MeetingUsers']").css('display', 'none');
selected = $("#MeetingUsersList").val();
$.each($(".chosen-container .search-choice"), function (i, e) {
selectedTitle += $(e).find('span').text() + ',';
});
$("#MeetingUsers").val(selected);//保存选择值
$("#MeetingUsersName").val(selectedTitle.substring(0, selectedTitle.length - 1));//保存选择标题
chose.trigger('chosen:updated');
}).bind("chosen:maxselected", function () {
$("div[validata='MeetingUsers']").css('display', 'block').html('请选择参会人员!');
return false;
});
//初始化设置值
chose.val($("#MeetingUsers").val().split(','));//根据value设置选中值,设置的时候如果多个 传数组
chose.trigger('chosen:updated');//传递完成之后刷新
}
});
chosen.jquery.js 使用笔记的更多相关文章
- chosen.jquery.js 搜索框只能从头匹配的解决思路+方法
chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...
- chosen.jquery.js
http://baifjece.blog.163.com/blog/static/33794654201286102519119/ ------------------首次加载设置默认选中项----- ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- chosen.jquery.min.js select2.js 弊端
chosen.jquery.min.js --将select放在页面最下方,会导致页面高度增加,最下方空白多出来 select2.js --点击select 但未选择,然后移出鼠标,发现其他文本框.关 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- jquery mobile开发笔记之Ajax提交数据(转)
http://my.oschina.net/xiahuawuyu/blog/81763 这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容.可能之前有过web的开发基础,相对 ...
- 带搜索框的下拉框chosen.jQury.js
下载所需js,css png资源 <link href="chosen.css" rel="stylesheet" type="text ...
- 【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- Node.js学习笔记(3):NPM简明教程
Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...
随机推荐
- C++学习笔记(二)之数组
数组作形参时,实际传入数组首地址 void print(const int*) void print(const int []) ]) 三种方法等价
- Android Bitmap转换WebP图片导致损坏的分析及解决方案
背景 作为移动领域所力推的图片格式,WebP图片在商业领域证明了其应有的价值.基于其他格式的横向对比,其在压缩性能表现,及还原度极为优秀,节省大量的带宽开销.基于可观的效益比,团队早前已开始磋商将当前 ...
- SQL Server的安装笔记
SQL安装笔记 安装SQL Server 2008 打开SQL Server 2008中的setup.exe,显示SQL安装程序的对话框. 提示必须安装相关组件Microsoft.NET Framew ...
- Maven之pom.xml详释
什么是pom? POM(Project Object Model):全称项目对象模型,它是Maven项目中的文件,使用XML表示,名称叫做pom.xml.在Maven项目中,必须包含pom.xml文件 ...
- dubbo之服务降级
向注册中心写入动态配置覆盖规则:(通过由监控中心或治理中心的页面完成) RegistryFactory registryFactory = ExtensionLoader.getExtensionLo ...
- v-bind、v-on、计算属性
v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> & ...
- input password密码验证跳转页面
代码如下: 查询密码 <input type="password" id="pwd" /> 页面如下: 密码校验成功后跳转页面: window.lo ...
- STL源码分析之第二级配置器
前言 第一级是直接调用malloc分配空间, 调用free释放空间, 第二级三就是建立一个内存池, 小于128字节的申请都直接在内存池申请, 不直接调用malloc和free. 本节分析第二级空间配置 ...
- C语言scanf函数详细解释(转载)
原文地址:https://blog.csdn.net/21aspnet/article/details/174326 scanf 函数名: scanf 功 能: 执行格式化输入 用 法: int sc ...
- Fleecing the Raffle(NCPC 2016 暴力求解)
题目: A tremendously exciting raffle is being held, with some tremendously exciting prizes being given ...