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>

Bootstrap双列表框

Bootstrap双列表框

猜你喜欢