Responsive Multi Select List

Custom multi Select list in Jquery

by Faisal Khan Janjua

HTML

<div class="col-xs-12 col-sm-8 col-md-7">
  <div class="multiSelect" data-name="frstItem">
    <ul class="allOptions">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
    <div class="multiSelectBtns">
      <span class="btn icon-left btn-copyAll"><i class="actionIcon"></i>Copy All</span>
      <span class="btn icon-left btn-copy"><i class="actionIcon"></i>Copy</span>
      <span class="btn icon-left btn-remove"><i class="actionIcon"></i>Remove</span>
      <span class="btn icon-left btn-removeAll"><i class="actionIcon"></i>Remove All</span>
    </div>
    <ul class="selectedOptions">
    </ul>
    <div class="selectedItems"></div>
    <div class="sm-only">
      <label data-value="A">A</label>
      <label data-value="B">B</label>
      <label data-value="C">C</label>
      <label data-value="D">D</label>
    </div>
  </div>
</div>

<div class="col-xs-12 col-sm-8 col-md-7">
  <div class="multiSelect" data-name="secondItem">
    <ul class="allOptions">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
    <div class="multiSelectBtns">
      <span class="btn icon-left btn-copyAll"><i class="actionIcon"></i>Copy All</span>
      <span class="btn icon-left btn-copy"><i class="actionIcon"></i>Copy</span>
      <span class="btn icon-left btn-remove"><i class="actionIcon"></i>Remove</span>
      <span class="btn icon-left btn-removeAll"><i class="actionIcon"></i>Remove All</span>
    </div>
    <ul class="selectedOptions">
    </ul>
    <div class="selectedItems"></div>
    <div class="sm-only">
      <label data-value="A">A</label>
      <label data-value="B">B</label>
      <label data-value="C">C</label>
      <label data-value="D">D</label>
    </div>
  </div>
</div>

<div class="col-xs-12 col-sm-8 col-md-7">
  <div class="multiSelect" data-name="thirdItem">
    <ul class="allOptions">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
    <div class="multiSelectBtns">
      <span...

SCSS

input {
  width: 25%;
  box-sizing: border-box;
}
.multiSelect {
  display: block;
  margin-bottom: 10px;
  border: 1px solid #F0F0F0;
  &:after {
    content: '';
    clear: both;
    display: table;
  }
  & ul {
    width: 35%;
    margin: 0;
    padding: 0;
    float: left;
    height: 200px;
    list-style: none;
    border: 1px solid #999;
    & li {
      display: block;
      padding: 6px;
      &.selected {
        background: #99F;
      }
    }
  }
  & .multiSelectBtns {
    width: 29%;
    float: left;
    height: 200px;
    padding: 0 10px;
    box-sizing: border-box;
    & .btn {
      cursor: pointer;
      display: block;
      padding: 8px 10px;
      text-align: center;
      border: 1px solid #888;
      margin-bottom: 10px;
    }
  }
  & .sm-only {
    clear: both;
    & label {
      display: block;
      position: relative;
      &:after {
        content: '';
        top: 0;
        right: 0;
        width: 16px;
        height: 16px;
        position: absolute;
        border-radius: 4px;
        border: 1px solid #999;
      }
      &.checked:after {
        background: #99f;
      }
    }
  }
}

JavaScript

alert('Started');

function syncInputs(parentElm) {
  var fieldname = parentElm.attr('data-name'),
    htmlInput = '';
  parentElm.find('.sm-only label').removeClass('checked');
  parentElm.find('.selectedOptions').find('li').each(function() {
    var val = $(this).text();
    parentElm.find('.sm-only label[data-value="' + val + '"]').addClass('checked');
    htmlInput += '<input type="text" value="' + val + '" name="' + fieldname + '" />';
  });
  parentElm.find('.selectedItems').html(htmlInput);
}
$(document).on('click', '.multiSelect ul li', function() {
  $(this).toggleClass('selected');
});
$(document).on('click', '.multiSelect .sm-only label', function() {
  $(this).toggleClass('checked');
  var thisLabel = $(this).attr('data-value');
  if ($(this).hasClass('checked')) {
    $(this).closest('.multiSelect').find('.allOptions li').each(function() {
      var liText = $(this).text();
      if (liText == thisLabel) {
        console.log($(this).prop('outerHTML'));
        $(this).closest('.multiSelect').find('.selectedOptions').append($(this).prop('outerHTML'));
        $(this).remove();
      }
    });
  } else {
    $(this).closest('.multiSelect').find('.selectedOptions li').each(function() {
      var liText = $(this).text();
      if (liText == thisLabel) {
        console.log($(this).prop('outerHTML'));
        $(this).closest('.multiSelect').find('.allOptions').append($(this).prop('outerHTML'));
        $(this).remove();
      }
    });
  }
  syncInputs($(this).closest('.multiSelect'));
});
$('.multiSelect').each(function() {
  syncInputs($(this));
});
$(document).on('click', '.multiSelectBtns .btn-copyAll', function() {
  var cpAllOptions = $(this).parent().prev('.allOptions').html();
  $(this).closest('.multiSelect').find('.allOptions').html('');
  cpAllOptions = cpAllOptions.replace(/ class="selected"+/g, '');
  $(this).closest('.multiSelect').find('.selectedOptions').append(cpAllOptions);
 ...