<script>
  init({
    title: 'Submit Select',
    desc: 'Submit select with <code>name</code> attribute in form.',
    links: ['multiple-select.min.css'],
    scripts: ['multiple-select.min.js']
  })
</script>


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

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

      <div class="col-sm-10">
        <select name="select1">
          <option value="1">First</option>
          <option value="2">Second</option>
          <option value="3">Third</option>
          <option value="4">Fourth</option>
        </select>
      </div>
    </div>

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

      <div class="col-sm-10">
        <select name="select2" multiple required>
          <option value="1">First</option>
          <option value="2">Second</option>
          <option value="3">Third</option>
          <option value="4">Fourth</option>
        </select>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-10 offset-sm-2">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>

<script>
  function mounted() {
    $('select').multipleSelect()

    $('form').submit(function () {
      alert($(this).serialize())
      return false
    })
  }
</script>
