<script>
  init({
    title: 'The setSelects/getSelects',
    desc: 'Use <code>multipleSelect(\'setSelects\', [])</code> and <code>multipleSelect(\'getSelects\')</code> to set selects and get selects.',
    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="setSelectsBtn" class="btn btn-secondary">SetSelects</button>
      <button id="getSelectsBtn" class="btn btn-secondary">GetSelects</button>
      <button id="setSelectsBtn2" class="btn btn-secondary">SetSelects by 'text'</button>
      <button id="getSelectsBtn2" class="btn btn-secondary">GetSelects by 'text'</button>
    </div>
  </div>

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

    <div class="col-sm-10">
      <select multiple="multiple">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
  </div>
</div>

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

  function mounted() {
    $select.multipleSelect()

    $('#setSelectsBtn').click(function () {
      $select.multipleSelect('setSelects', [1, 3])
    })

    $('#getSelectsBtn').click(function () {
      alert('Selected values: ' + $select.multipleSelect('getSelects'))
    })

    $('#setSelectsBtn2').click(function () {
      $select.multipleSelect('setSelects', ['February', 'April'], 'text')
    })

    $('#getSelectsBtn2').click(function () {
      alert('Selected values: ' + $select.multipleSelect('getSelects', 'text'))
    })
  }
</script>
