<script>
  init({
    title: 'The check/uncheck',
    desc: 'Methods: <code>multipleSelect(\'check\', 2)</code> and <code>multipleSelect(\'uncheck\', 2)</code> to check and uncheck a select option.',
    links: ['multiple-select.min.css'],
    scripts: ['multiple-select.min.js']
  })
</script>

<style>
select {
  width: 100%;
}
</style>

<div>
  <div class="form-group row">
    <label class="col-sm-2">
      Methods
    </label>

    <div class="col-sm-10">
      <button id="checkBtn" class="btn btn-secondary">Check</button>
      <button id="uncheckBtn" class="btn btn-secondary">Uncheck</button>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2">
      Single Select
    </label>

    <div class="col-sm-10">
      <select>
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2">
      Multiple Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <option value="1" selected>Value 1</option>
        <option value="2">Value 2</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2">
      Group Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <optgroup label="Group 1">
          <option value="1" selected>Value 1</option>
          <option value="2">Value 2</option>
        </optgroup>
        <optgroup label="Group 2">
            <option value="3" selected>Value 3</option>
            <option value="4">Value 4</option>
          </optgroup>
      </select>
    </div>
  </div>
</div>

<script>
  var $select = $('select')

  function mounted() {
    $select.multipleSelect()

    $('#checkBtn').click(function () {
      $select.multipleSelect('check', 2)
    })

    $('#uncheckBtn').click(function () {
      $select.multipleSelect('uncheck', 2)
    })
  }
</script>
