码迷,mamicode.com
首页 > Web开发 > 详细

JQuery chosen插件,实现select多选

时间:2015-08-31 11:25:45      阅读:3551      评论:0      收藏:0      [点我收藏+]

标签:

步骤: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");  

  

 

JQuery chosen插件,实现select多选

标签:

原文地址:http://www.cnblogs.com/binbang/p/4772493.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!