CDCC
/
OLAS


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
							<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap-select test page</title>

  <meta charset="utf-8">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="dist/css/bootstrap-select.css">

  <style>
    body {
      padding-top: 70px;
    }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="dist/js/bootstrap-select.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap-select usability tests</a>
    </div>
  </div>
</nav>

<div class="container">
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="basic" class="col-lg-2 control-label">"Basic" (liveSearch disabled)</label>

      <div class="col-lg-10">
        <select id="basic" class="selectpicker show-tick form-control">
          <option>cow</option>
          <option data-subtext="option subtext">bull</option>
          <option class="get-class" disabled>ox</option>
          <optgroup label="test" data-subtext="optgroup subtext">
            <option>ASD</option>
            <option selected>Bla</option>
            <option>Ble</option>
          </optgroup>
        </select>
      </div>
    </div>
  </form>

  <hr>

  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="basic" class="col-lg-2 control-label">"Basic" (liveSearch enabled)</label>

      <div class="col-lg-10">
        <select id="basic" class="selectpicker show-tick form-control" data-live-search="true">
          <option>cow</option>
          <option data-subtext="option subtext">bull</option>
          <option class="get-class" disabled>ox</option>
          <optgroup label="test" data-subtext="optgroup subtext">
            <option>ASD</option>
            <option selected>Bla</option>
            <option>Ble</option>
          </optgroup>
        </select>
      </div>
    </div>
  </form>

  <hr>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="basic2" class="col-lg-2 control-label">"Basic" (multiple, maxOptions=1)</label>

      <div class="col-lg-10">
        <select id="basic2" class="show-tick form-control" multiple>
          <option>cow</option>
          <option>bull</option>
          <option class="get-class" disabled>ox</option>
          <optgroup label="test" data-subtext="another test">
            <option>ASD</option>
            <option selected>Bla</option>
            <option>Ble</option>
          </optgroup>
        </select>
      </div>
    </div>
  </form>

  <hr>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="maxOption2" class="col-lg-2 control-label">multiple, show-menu-arrow, maxOptions=2</label>

      <div class="col-lg-10">
        <select id="maxOption2" class="selectpicker show-menu-arrow form-control" multiple data-max-options="2">
          <option>chicken</option>
          <option>turkey</option>
          <option disabled>duck</option>
          <option>goose</option>
        </select>
      </div>
    </div>
  </form>

  <hr>
  <form class="form-inline">
    <div class="form-group">
      <label class="col-md-1 control-label" for="lunch">Lunch:</label>
    </div>
    <div class="form-group">
      <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
        <option>Hot Dog, Fries and a Soda</option>
        <option>Burger, Shake and a Smile</option>
        <option>Sugar, Spice and all things nice</option>
        <option>Baby Back Ribs</option>
        <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
      </select>
    </div>
  </form>

  <hr>
  <form class="form-horizontal" role="form">
    <div class="form-group form-group-lg">
      <label for="error" class="col-lg-2 control-label">error</label>

      <div class="col-lg-10 error">
        <select id="error" class="selectpicker show-tick form-control">
          <option>pen</option>
          <option>pencil</option>
          <option selected>brush</option>
        </select>
      </div>
    </div>
  </form>

  <hr>
  <form class="form-horizontal" role="form">
    <div class="form-group has-error form-group-lg">
      <label class="control-label col-lg-2" for="country">error type 2</label>

      <div class="col-lg-10">
        <select id="country" name="country" class="form-control selectpicker">
          <option>Argentina</option>
          <option>United State</option>
          <option>Mexico</option>
        </select>

        <p class="help-block">No service available in the selected country</p>
      </div>
    </div>
  </form>

  <hr>
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Navbar</a>
      </div>

      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <select class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true">
            <optgroup label="filter1">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
            <optgroup label="filter2">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
            <optgroup label="filter3">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
          </select>
        </div>

        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="q">

          <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
          </div>
        </div>
        <button type="submit" class="btn btn-default">Search</button>
      </form>

    </div>
    <!-- .container-fluid -->
  </nav>

  <hr>
  <select id="first-disabled" class="selectpicker" data-hide-disabled="true" data-live-search="true">
    <optgroup disabled="disabled" label="disabled">
      <option>Hidden</option>
    </optgroup>
    <optgroup label="Fruit">
      <option>Apple</option>
      <option>Orange</option>
    </optgroup>
    <optgroup label="Vegetable">
      <option>Corn</option>
      <option>Carrot</option>
    </optgroup>
  </select>

  <hr>
  <select id="first-disabled2" class="selectpicker" multiple data-hide-disabled="true" data-size="5">
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Apple2</option>
    <option>Banana2</option>
    <option>Orange2</option>
    <option>Pineapple2</option>
    <option>Apple2</option>
    <option>Banana2</option>
    <option>Orange2</option>
    <option>Pineapple2</option>
  </select>
  <button id="special" class="btn btn-default">Hide selected by disabling</button>
  <button id="special2" class="btn btn-default">Reset</button>
  <p>Just select 1st element, click button and check list again</p>

  <hr>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <select class="form-control selectpicker">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
  </div>

  <hr>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <select class="form-control selectpicker" data-mobile="true">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
  </div>
  <p>With <code>data-mobile="true"</code> option.</p>

  <hr>
  <select id="done" class="selectpicker" multiple data-done-button="true">
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Apple2</option>
    <option>Banana2</option>
    <option>Orange2</option>
    <option>Pineapple2</option>
    <option>Apple2</option>
    <option>Banana2</option>
    <option>Orange2</option>
    <option>Pineapple2</option>
  </select>

  <hr>

  <div class="form-group">
    <label for="tokens">Key words (data-tokens)</label>
    <select id="tokens" class="selectpicker form-control" multiple data-live-search="true">
      <option data-tokens="first">I actually am called "one"</option>
      <option data-tokens="second">And me "two"</option>
      <option data-tokens="last">I am "three"</option>
    </select>
  </div>

  <hr>
  <form class="form-inline">
    <div class="form-group">
      <label class="col-md-1 control-label" for="lunchBegins">Lunch (Begins search):</label>
    </div>
    <div class="form-group">
      <select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Please select a lunch ...">
        <option>Hot Dog, Fries and a Soda</option>
        <option>Burger, Shake and a Smile</option>
        <option>Sugar, Spice and all things nice</option>
        <option>Baby Back Ribs</option>
        <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
      </select>
    </div>
  </form>
</div>

<script>
  $(document).ready(function () {
    var mySelect = $('#first-disabled2');

    $('#special').on('click', function () {
      mySelect.find('option:selected').prop('disabled', true);
      mySelect.selectpicker('refresh');
    });

    $('#special2').on('click', function () {
      mySelect.find('option:disabled').prop('disabled', false);
      mySelect.selectpicker('refresh');
    });

    $('#basic2').selectpicker({
      liveSearch: true,
      maxOptions: 1
    });
  });
</script>
</body>
</html>