JQuery chosen插件,实现select多选

步骤:1、js

2、在select标签上添加 multiple="multiple" 属性

3、添加class=" chosen-select" 属性

即可实现多选

默认值选定:

  1、获取标签默认值,根据格式拆分数据

  2、使用

   

$(‘.chosen-select‘).chosen({
			allow_single_deselect : true
		});

		$(‘.chosen-select‘).trigger("liszt:updated");

  

  eg:

<div class="form-group ">
		<label class="col-sm-2 control-label no-padding-right" for="moonComplications">中期并发症:</label>
		<select multiple="multiple" class="col-xs-5 col-sm-3 chosen-select" name="moonComplications">
			<option value="ADIPOSEATROPHY">注射部位皮下脂肪萎缩或增生</option>
			<option value="JOINTILL">关节活动障碍</option>
			<option value="GROWSICK">生长障碍</option>
			<option value="CATARACT">白内障</option>
			<option value="OSTEOPOROSIS">骨质疏松</option>
		</select>
	</div>

  

var $disease = $(‘#diseaseTable‘);
		$(‘#editDisease‘).click(
				function() {
					var objs = $disease.find(‘span‘);
					for ( var index in objs) {
						var obj = objs.eq(index);
						if(obj.attr(‘id‘) == ‘fastComplications‘ || obj.attr(‘id‘) == ‘moonComplications‘ || obj.attr(‘id‘) == ‘slowComplications‘){
							var value = obj.text();
							var selValue = value.split(‘,‘);
							for ( var sel in selValue) {
								$("select[name=‘"+obj.attr(‘id‘)+"‘]").chosen("destroy");
								$("select[name=‘"+obj.attr(‘id‘)+"‘] option[value=‘"+selValue[sel]+"‘]").attr("selected","selected");
								$("select[name=‘"+obj.attr(‘id‘)+"‘]").trigger("liszt:updated");
								$("select[name=‘"+obj.attr(‘id‘)+"‘]").chosen({
									allow_single_deselect : true
								});
							}
						}else{
							$diseaseDialog.find("[name=‘" + obj.attr(‘id‘) + "‘]")
								.val(obj.text());
						}
					}
					//打开对话框
					$diseaseDialog.dialog($.extend(dialogOption, {
						title : "修改"
					}));
					$diseaseDialog.dialog("open");
				});

  

	$(‘.chosen-select‘).chosen({
			allow_single_deselect : true
		});

		$(‘.chosen-select‘).trigger("liszt:updated");

  

时间: 2024-12-05 20:12:36

JQuery chosen插件,实现select多选的相关文章

jquery chosen 插件多选初始化

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="../css/chosen.css

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos

实现多选和搜索过滤功能的jQuery下拉列表框插件

Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件.通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择. 在线预览   源码下载 使用方法 使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css.jQuery和fm.selectator.jquery.js文件. <link rel="stylesheet" href="fm.selectator.jquery.css&qu

jquery插件-自定义select

由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦.最好的办法就是使用自定义样式仿select效果.这里写了一个jquery插件,实现自定义的select(阉割了不少原生select的事件,但是最主要的都还在) 需要引用的样式: .self-select-wrapper{ position: relative; display: inline-block; border: 1px solid #d0d0d0; wid

Jquery chosen动态设置值 select Ajax动态加载数据 设置chosen和获取他们选中的值

在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态加载option和对option的选中.但是由于项目中使用了jquery里的chosen()方法,怎么也无法实现效果.原码如下: Java代码   <select id="viewOLanguage" data-rel="chosen"> <option value="zh">简体中文(简体中文 Chinese)</option>

Jquery chosen动态设置值 select Ajax动态载入数据 设置chosen和获取他们选中的值

? 在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态载入option和对option的选中.可是由于项目中使用了jquery里的chosen()方法.怎么也无法实现效果.原码例如以下: ? ? Java代码 ? <select?id="viewOLanguage"?data-rel="chosen">?? ????<option?value="zh">中文简体(中文简体?Chinese)&l

jQuery Validate 插件,表单验证功能

连接地址:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jör

jquery.cxSelect插件,城市没单位

jquery.cxSelect插件,新增城市没单位也能显示出来的功能. 具体,请查看修改后的插件代码:(主要是FixNoUnit函数) /*! * jQuery cxSelect * @name jquery.cxselect.js * @version 1.3.4 * #date 2013-12-18 * @author ciaoca * @email [email protected] * @site https://github.com/ciaoca/cxSelect * @license

jquery Chosen使用

1,首先去http://harvesthq.github.io/chosen/下载插件. 2,在网页中加入下面的文件. <link rel="stylesheet" href="/css/chosen.css" /> <script type="text/javascript" src="/js/jquery.form.js"></script> <script type="