pickList Multiple Instance Demo

A simple plugin for jQuery and Bootstrap

by Gabriel Rodrigues

HTML

<br>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">PickList Demo</h3>
    </div>
    <div class="panel-body">

      <div id="pickList"></div>
      <br>
      <div id="pickList2"></div>
      <br>
      <br>
      <button class="btn btn-primary" id="getSelected">Get Selected</button>
      <button class="btn btn-primary" id="getSelected2">Get Selected 2</button>
    </div>
  </div>
</div>

CSS

.pickListButtons {
  padding: 10px;
  text-align: center;
}

.pickListButtons button {
  margin-bottom: 5px;
}

.pickListSelect {
  height: 200px !important;
}

JavaScript

(function($) {

  $.fn.pickList = function(options) {

    var opts = $.extend({}, $.fn.pickList.defaults, options);

    this.fill = function() {
      var option = '';

      $.each(opts.data, function(key, val) {
        option += '<option data-id=' + val.id + '>' + val.text + '</option>';
      });
      this.find('.pickData').append(option);
    };
    this.controll = function() {
      var pickThis = this;

      pickThis.find(".pAdd").on('click', function() {
        var p = pickThis.find(".pickData option:selected");
        p.clone().appendTo(pickThis.find(".pickListResult"));
        p.remove();
      });

      pickThis.find(".pAddAll").on('click', function() {
        var p = pickThis.find(".pickData option");
        p.clone().appendTo(pickThis.find(".pickListResult"));
        p.remove();
      });

      pickThis.find(".pRemove").on('click', function() {
        var p = pickThis.find(".pickListResult option:selected");
        p.clone().appendTo(pickThis.find(".pickData"));
        p.remove();
      });

      pickThis.find(".pRemoveAll").on('click', function() {
        var p = pickThis.find(".pickListResult option");
        p.clone().appendTo(pickThis.find(".pickData"));
        p.remove();
      });
    };

    this.getValues = function() {
      var objResult = [];
      this.find(".pickListResult option").each(function() {
        objResult.push({
          id: $(this).data('id'),
          text: this.text
        });
      });
      return objResult;
    };

    this.init = function() {
      var pickListHtml =
        "<div class='row'>" +
        "  <div class='col-sm-5'>" +
        "	 <select class='form-control pickListSelect pickData' multiple></select>" +
        " </div>" +
        " <div class='col-sm-2 pickListButtons'>" +
        "	<button  class='pAdd btn btn-primary btn-sm'>" + opts.add + "</button>" +
        "      <button  class='pAddAll btn btn-primary btn-sm'>" + opts.addAll + "</button>" +
        "	<button  class='pRemove...