JQuery Select多選插件實現

時間 2019-12-06
原文原文鏈接
只有對JQuery的依賴，直接上代碼。css
<html>
<style>
.none {
	display:none;
}
</style>
<script src="jquery.min.js"></script>
<script>
/* Rocky JQuery Multi Select Plugin
 * options:
 * width, maxHeight, singleHeight, data({'value': 'val', 'text': 'txt', 'selected': true}), selectAll
 * note: after multi select, selected text can be got by $(selector).val(), and selected value can be got by $(selector).attr("title");
 */
$.fn.extend({//jquery plugin
    multiSelect: function (options){
		
	    var defaults = {
            width: '150',
            maxHeight: '180',//dropdown height
			singleHeight: '22',//option height
            data: [{"value": "val1", "text": "txt1", "selected": true}, {"value": "val2", "text": "txt2", "selected": false}],
            selectAll: 'All'
	    };
	    var options = $.extend(defaults, options);
		var global = {
			valArr: [],
			txtArr: []
		};
	    
		var $input = $(this);
		$input.attr("readonly", true);
		$input.width(options.width);
		var $select = $('<select disabled="true"></select>');//prevent default dropdown
		$select.css({"position": "absolute", "left": options.width - 94, "top": 2, "height": 21, "clip": "rect(1px auto auto 80px)", "width": 100});//style to make input and select overlap
		$input.before($select);
		var $container = $('<div style="border:1px solid #5394DD; position: absolute; left: 1px; background-color: #FFFFFF"></div>');
		$container.width(options.width);//customized dropdown
	    
		var $top = $('<div style="background: #DBEAF9; border-bottom: 1px solid gray; height: ' + options.singleHeight + 'px;"></div>');//select all
		var $all = $('<input type="checkbox"/><label>'+options.selectAll+'</label>');
		var $contentOut = $('<div style="overflow-y: auto;"></div>');//options
		$contentOut.height(options.maxHeight);
		var count = options.data.length;
		var height = ( (count * options.singleHeight) > parseInt(options.maxheight) ) ? options.maxheight : "'" + count * options.singleHeight + "'";
		var $content = $('<div></div>').height(height);
		for(var i = count - 1; i >= 0; i--){
		    var $list = $('<div><input title="'+options.data[i].text+'" type="checkbox" value='+options.data[i].value+'><label title='+options.data[i].text+'>'+options.data[i].text+'</label><br></div>');
		    $list.appendTo($content).children('input').attr("checked", options.data[i].selected);
		}
		
        //reconstruct dom
        $all.appendTo($top);
		$top.appendTo($container);
        $content.appendTo($contentOut);
		$contentOut.appendTo($container);
		$input.after($container);	
        
		var $dropDown = $content.children().children('input');
		$all.change(function (){//select all action
			global.valArr = [];
			global.txtArr = [];
			$dropDown .each(function (){
				if($all.is(':checked')){
					this.checked = 'checked';
				    global.txtArr.push(this.title);
				    global.valArr.push(this.value);
				}else{
					this.checked = '';
				}
			});
			$input[0].value = global.txtArr.join(';');//put text in input.value
			$input[0].title = global.valArr.join(';');//put value in input.title
		});
		
		$container.addClass('none');
		$input.click(function (){//dropdown trigger
			if ($container.hasClass("none")) {
				$container.removeClass('none');
			}
			else {
				$container.addClass('none');
			}
		});
		
		$dropDown .change(function (){//checkbox action
			global.valArr = [];
			global.txtArr = [];
			$dropDown .each(function (){
			    if ($(this).is(':checked')) {
				    global.txtArr.push(this.title);
				    global.valArr.push(this.value);
			    }  
			});
			var $selected = $content.children().children('input:checked');
			$input[0].value = global.txtArr.join(';');//put text in input.value
			$input[0].title = global.valArr.join(';');//put value in input.title
			$all[0].checked = ($selected.length === $dropDown .length) ? 'checked' : '';
		});
		$dropDown .trigger("change");
    }
});

$(function (){
  $('#multiSelect').multiSelect({
    'width': '160',
    'data': [{"value": "v1", "text": "txt1", "selected": true},
			{"value": "v2", "text": "txt2"},
			{"value": "v3", "text": "txt3"},
			{"value": "v4", "text": "txt4", "selected": true},
			{"value": "v5", "text": "txt5"},
			{"value": "v6", "text": "txt6"},
			{"value": "v7", "text": "txt7"},
			{"value": "v8", "text": "txt8", "selected": true},
			{"value": "v9", "text": "txt9"},
			{"value": "v0", "text": "txt0"}]
  });
});
</script>
<span style="overflow:hidden;position:relative;">
	<input type="text" readonly value="" id="multiSelect" />
<span>
<html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。