• 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();
    

      

  • 相关阅读:
    C# 读写ini文件
    How to Create DLL(Dynamic link library)
    运算符优先级
    汇编指令:lea
    AT&T汇编语法与x86语法基本区别
    栈的生长方向理解
    Mac Mojave 10.14.5安装python tesserocr
    一台电脑发布多个网站
    局域网内电脑之间互相访问网站
    判断两个对象是否相等——javascript实现
  • 原文地址:https://www.cnblogs.com/binbang/p/4772493.html
Copyright © 2020-2023  润新知