只有对JQuery的依赖,直接上代码。
<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>