mirror of https://github.com/cwinfo/powerdns-admin.git synced 2025-01-06 18:35:40 +00:00

History

Khanh Ngo 2dac8205f6 Initial commit		2015-12-13 16:34:12 +07:00
..
bootstrap-selectsplitter.js	Initial commit	2015-12-13 16:34:12 +07:00
bootstrap-selectsplitter.min.js	Initial commit	2015-12-13 16:34:12 +07:00
bower.json	Initial commit	2015-12-13 16:34:12 +07:00
LICENSE	Initial commit	2015-12-13 16:34:12 +07:00
README.md	Initial commit	2015-12-13 16:34:12 +07:00

README.md

bootstrap-selectsplitter

Presentation

Transforms SELECT containing one or more OPTGROUP in two chained SELECT.

This:

Becomes this:

Demo

See the online demo.

How to use

Create a SELECT tag containing one or more OPTGROUP:

<select data-selectsplitter-selector>
  <optgroup label="Category 1">
    <option value="1">Choice 1</option>
    <option value="2">Choice 2</option>
    <option value="3">Choice 3</option>
    <option value="4">Choice 4</option>
  </optgroup>
  <optgroup label="Category 2">
    <option value="5">Choice 5</option>
    <option value="6">Choice 6</option>
    <option value="7">Choice 7</option>
    <option value="8">Choice 8</option>
  </optgroup>
  <optgroup label="Category 3">
    <option value="5">Choice 9</option>
    <option value="6">Choice 10</option>
    <option value="7">Choice 11</option>
    <option value="8">Choice 12</option>
  </optgroup>
</select>

Add the dependency files (jQuery and Bootstrap 3 CSS):

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="bootstrap-selectsplitter.js"></script>

Call the plugin:

$('select[data-selectsplitter-selector]').selectsplitter();

Bower

bower install bootstrap-selectsplitter

##CDN

<script src="//cdn.jsdelivr.net/bootstrap.selectsplitter/0.1.0/bootstrap-selectsplitter.min.js"></script>

Copyright and license

Licensed under the MIT license.