Multiselect

LINK：http://demo.mycodes.net/daima/Multiselect/;

HTML

<div class="muti-sel">
    <div class="col-xs-5">
        <select name="from[]" id="keepRenderingSort" class="form-control" size="8" multiple="multiple">
            <option value="1">Item 1</option>
	    <option value="2">Item 5</option>
	    <option value="2">Item 2</option>
            <option value="2">Item 4</option>
            <option value="3">Item 3</option>
        </select>
    </div>
    <div class="col-xs-2">
	    <button type="button" id="keepRenderingSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
	    <button type="button" id="keepRenderingSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
	    <button type="button" id="keepRenderingSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
	    <button type="button" id="keepRenderingSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
	</div>
	<div class="col-xs-5">
	    <select name="to[]" id="keepRenderingSort_to" class="form-control" size="8" multiple="multiple"></select>
	</div>
</div>

js

$('#keepRenderingSort').multiselect({
    keepRenderingSort: true,
    afterMoveToRight: function($left, $right, option){
        var sel_val = option.val();
	            	
    },
    afterMoveToLeft: function($left, $right, option){
    }
});
$('#keepRenderingSort').multiselect({
    right: '#js_multiselect_to_1',
    rightAll: '#js_right_All_1',
    rightSelected: '#js_right_Selected_1',
    leftSelected: '#js_left_Selected_1',
    leftAll: '#js_left_All_1'
});

参数

Name	type	default	description
right	stringjQuery selector	multiselect_id_to	The select where the options are moved to
rightSelected	stringjQuery selector	multiselect_id_rightSelected	The button that moves selected options from left to right
rightAll	stringjQuery selector	multiselect_id_rightAll	The button that moves all options from left to right
leftSelected	stringjQuery selector	multiselect_id_leftSelected	The button that moves selected options from right to left
leftAll	stringjQuery selector	multiselect_id_leftAll	The button that moves all options from right to left
startUp	function orfalse	remove from left all options that are present in right	Whatever you want to do with $left and $right elements when the multiselect plugin is initialised
sort	function orfalse	sort options alphabetically	Will sort options when an action happend into right or left elements.
beforeMoveToRight	function	return true	Whatever you want to do with $left, $right and option[s] elements before they are moved to right. Keep in mind that this function must return a boolean value. true will let the action to be performed. false will stop the action
afterMoveToRight	function	no action	Whatever you want to do with $left, $right and option[s] elements after they are moved to right.
beforeMoveToLeft	function	return true	Whatever you want to do with $left, $right and option[s] elements before they are moved to left. Keep in mind that this function must return a boolean value. true will let the action to be performed. false will stop the action
afterMoveToLeft	function	no action	Whatever you want to do with $left, $right and option[s] elements after they are moved to left.
keepRenderingSort	boolean	false	When you want to keep options sorted as they was rendered, keepRenderingSort must be true. When keepRenderingSort is true, sort function will be ignored.

转载于:https://blog.51cto.com/dd118/1880614