Welcome to bootstrapTransfer. This is a two-column transfer multi-select widget. It is inspired by Django admin module's similar widget. The look and feel is designed to blend with twitter bootstrap (2.0+), jQuery 1.7+ is assumed.
Usage :
First, in your html create a div and give it some id:
<div id="test"></div>
It is possible to set a width value whose bootstrapTransfer will use for the generated widget:
<div id="test" style="width:500px;"></div>
Also you can add some bootstrap classes such as 'input-xlarge' in forms:
<div id="test" class="input-xlarge"></div>
Now call bootstrapTransfer on the corresponding jquery object and add some values to the left column. You can also initialize bootstrapTransfer to have certain values in the right-hand column using the initialize_target method:
$(function() {
...
var t = $('#test').bootstrapTransfer();
t.populate([
{value:"1", content:"Apple"},
{value:"2", content:"Orange"},
{value:"3", content:"Banana"},
{value:"4", content:"Peach"},
{value:"5", content:"Grapes"}
]);
...
t.initialize_target([
"1",
"2",
"5"
]);
});
You can get the selected values any time:
console.log(t.get_values());
Setting new values is straightforward:
t.set_values(["2", "4"]);
Alternatively, you can access the plugin object directly from the selector:
$('#test').data().bootstrapTransfer.get_values()
$('#test').data().bootstrapTransfer.set_values(["2", "4"])
Note that the order of the items at population time is allways preserved in both get_values and set_values.
Options are:
target_id : the id of the internal select element, useful for wiring events and such
height : the height of the select columns, default value is '10em'
hilite_selection: if true will hilite the moved items between the columns, default value is true
Example:
$('#test').bootstrapTransfer(
{'target_id': 'multi-select-input'
'height': '15em',
'hilite_selection': false});
I hope you find this widget useful.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent