Bootstrap双列表框
Bootstrap双列表框是一个为Twitter Bootstrap优化的响应式双列表框小部件。 它适用于所有现代浏览器和触摸设备。
dual listbox
通过在一个可多选的select上,调用.bootstrapDualListbox(settings);
来创建
<select multiple="multiple" size="10" name="duallistbox_demo1[]">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
</select>
<br>
<button type="submit" class="btn btn-default btn-block">Submit data</button>
</form>
<script>
var demo1 = $('select[name="duallistbox_demo1[]"]').bootstrapDualListbox();
$("#demoform").submit(function() {
alert($('[name="duallistbox_demo1[]"]').val());
return false;
});
</script>
效果如下:
一些自定自定义的设置,如下:
<div class="col-md-7">
<select multiple="multiple" size="10" name="duallistbox_demo2" class="demo2">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
<option value="option0">Option 11</option>
<option value="option0">Option 12</option>
<option value="option0">Option 13</option>
<option value="option0">Option 14</option>
<option value="option0">Option 15</option>
<option value="option0">Option 16</option>
<option value="option0">Option 17</option>
<option value="option0">Option 18</option>
<option value="option0">Option 19</option>
<option value="option0">Option 20</option>
</select>
<script>
var demo2 = $('.demo2').bootstrapDualListbox({
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
preserveSelectionOnMove: 'moved',
moveOnSelect: false,
nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
});
</script>
</div>
效果如下:
动态添加option到select中
option
必须从原来的select
中添加或者移除
注意在操作option后,必须refresh
如果在list中有一些高亮的option
,调用refresh方法,带有true参数,会导致高亮被移除,如:
demo2.bootstrapDualListbox('refresh', true);
其只有在moveOnSelect
设置为false
时,才有意义
<script>
$("#demo2-add").click(function() {
demo2.append('<option value="apples">Apples</option><option value="oranges" selected>Oranges</option>');
demo2.bootstrapDualListbox('refresh');
});
$("#demo2-add-clear").click(function() {
demo2.append('<option value="apples">Apples</option><option value="oranges" selected>Oranges</option>');
demo2.bootstrapDualListbox('refresh', true);
});
</script>