zoukankan      html  css  js  c++  java
  • 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");  
    

      

     清空select 中的默认选中

        $("select[name='name']").val("");
                            $("select[name='name']").chosen("destroy");
                            $("select[name='name']").chosen();

    select 搜索功能,切勿忘引入js和css

    		<select name="name" class="chosen-select" id="id" data-placeholder="提示">
    			
    				<option value="${value}">${name}</option>
    		</select>
    
    
    
    $(".chosen-select").chosen();
    

      

  • 相关阅读:
    VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程
    【Demo 0025】注册/反注册窗体类RegisterClassEx/UnregisterClass
    《白手起家Win32SDK应用程序》(完整版+目录)
    关于初始化C++类成员
    TCP和UDP的"保护消息边界" (经典)
    (经典)tcp粘包分析
    解决TCP网络传输“粘包”问题
    无锁队列
    MFC全局函数开局——AfxGetApp解剖
    Tomcat系列之服务器的安装与配置以及各组件详解
  • 原文地址:https://www.cnblogs.com/binbang/p/4772493.html
Copyright © 2011-2022 走看看