Multiselect box reset function

by JOE

by Joe

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="bs-example">
  <nav class="nav nav-tabs">
    <a href="#bankTab" data-toggle="tab" class="nav-item nav-link active">Bank</a>
    <a href="#cashTab" data-toggle="tab" class="nav-item nav-link">Cash</a>
    <a href="#plTab" data-toggle="tab" class="nav-item nav-link">P & L</a>
    <a href="#tdsTab" data-toggle="tab" class="nav-item nav-link">TDS Creation</a>
  </nav>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="bankTab">
    <form class="form" action="##" method="post" id="banktabForm">
      <div class="selectContainer" id="bankTab">
        <select multiple="multiple" name="" id="firstData">
          <option name="opt1" value="AB">Allahabad Bank</option>
          <option name="opt2" value="AN">Andhra Bank</option>
          <option name="opt3" value="BI">Bank of India</option>
          <option name="opt4" name="opt3" value="BB">Bank of Baroda</option>
          <option name="opt5" value="BM">Bank of Maharashtra</option>
          <option name="opt6" value="CB">Canara Bank</option>
        </select>
      </div>
      <div class="form-group">
        <div class="col-xs-12">
          <br>
          <button class="btn btn-lg btn-success...

CSS

.multi-wrapper {
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  width: 100%
}

.multi-wrapper .non-selected-wrapper,
.multi-wrapper .selected-wrapper {
  box-sizing: border-box;
  display: inline-block;
  height: 200px;
  overflow-y: scroll;
  padding: 10px;
  vertical-align: top;
  width: 50%
}

.multi-wrapper .non-selected-wrapper {
  background: #fafafa;
  border-right: 1px solid #ccc
}

.multi-wrapper .selected-wrapper {
  background: #fff
}

.multi-wrapper .item {
  cursor: pointer;
  display: block;
  padding: 5px 10px
}

.multi-wrapper .item:hover {
  background: #ececec;
  border-radius: 2px
}

.multi-wrapper .search-input {
  border: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  display: block;
  font-size: 1em;
  margin: 0;
  outline: 0;
  padding: 10px 20px;
  width: 100%
}

.multi-wrapper .non-selected-wrapper .item.selected {
  opacity: .5
}

.multi-wrapper .non-selected-wrapper .row.selected:hover {
  background: inherit;
  cursor: inherit
}

JavaScript

(function($) {

  function refresh_select($select) {

    // Clear columns
    $select.wrapper.selected.html('');
    $select.wrapper.non_selected.html('');

    // Get search value
    if ($select.wrapper.search) {
      var query = $select.wrapper.search.val();
    }

    var options = [];

    // Find all select options
    $select.find('option').each(function() {
      var $option = $(this);

      var value = $option.prop('value');
      var label = $option.text();
      var selected = $option.is(':selected');

      options.push({
        value: value,
        label: label,
        selected: selected,
        element: $option,
      });
    });

    // Loop over select options and add to the non-selected and selected columns
    options.forEach(function(option) {
      var $row = $('<a tabindex="0" role="button" class="item"></a>').text(option.label).data('value', option.value);

      // Create clone of row and add to the selected column
      if (option.selected) {
        $row.addClass('selected');
        var $clone = $row.clone();

        // Add click handler to mark row as non-selected
        $clone.click(function() {
          option.element.prop('selected', false);
          $select.change();
        });

        // Add key handler to mark row as selected and make the control accessible
        $clone.keypress(function() {
          if (event.keyCode === 32 || event.keyCode === 13) {
            // Prevent the default action to stop scrolling when space is pressed
            event.preventDefault();
            option.element.prop('selected', false);
            $select.change();
          }
        });

        $select.wrapper.selected.append($clone);
      }

      // Add click handler to mark row as selected
      $row.click(function() {
        option.element.prop('selected', 'selected');
        $select.change();
      });

      // Add key handler to mark row as selected and make the control accessible
      $row.keypress(function() {
      ...