listgrp ezy

listgrp ezy

by pj_js15

HTML

<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RubaXa/Sortable/Sortable.min.js"></script>
<div class="container mt-5">
  <div class="row">
    <div class="col-3">
      <select class="step4 search-dropdown form-control" data-stepnum="step4" size="10">
        <option value="MZEA12R -MZEA12">MZEA12R -MZEA12</option>
        <option value="NKE165R -NKE165">NKE165R -NKE165</option>
        <option value="ZRE172R -ZRE172">ZRE172R -ZRE172</option>
        <option value="ZWE211R -ZWE211">ZWE211R -ZWE211</option>
        <option value="MZEA12R -MZEA12">MZEA12R -MZEA12</option>
        <option value="NKE165R -NKE165">NKE165R -NKE165</option>
        <option value="ZRE172R -ZRE172">ZRE172R -ZRE172</option>
        <option value="ZWE211R -ZWE211">ZWE211R -ZWE211</option>
        <option value="MZEA12R -MZEA12">MZEA12R -MZEA12</option>
        <option value="NKE165R -NKE165">NKE165R -NKE165</option>
        <option value="ZRE172R -ZRE172">ZRE172R -ZRE172</option>
        <option value="ZWE211R -ZWE211">ZWE211R -ZWE211</option>
      </select>
    </div>
    <div class="col-3 select-filter-group">
      <select class="step4 search-dropdown-one form-control" data-stepnum="step4" size="10">
        <option value="MZEA12R -MZEA12">MZEA12R -MZEA12</option>
        <option value="NKE165R -NKE165">NKE165R -NKE165</option>
        <option value="ZRE172R -ZRE172">ZRE172R -ZRE172</option>
        <option value="ZWE211R -ZWE211">ZWE211R -ZWE211</option>
        <option value="MZEA12R -MZEA12">MZEA12R -MZEA12</option>
        <option value="NKE165R -NKE165">NKE165R -NKE165</option>
        <option value="ZRE172R -ZRE172">ZRE172R -ZRE172</option>
       ...

SCSS

.standard-search{

  height: 230px;
  overflow-y: auto;
 
  
  .list-group-item-action{
    line-height: 16px;
    padding: 8px 22px;
    box-shadow: none;
    
    &.active{
      background-color: #C7E7FF;
    }
  }
}

JavaScript

$().ready(function(){

	
  
  var $yearFilter = $(".search-dropdown-one");
  var $yearFilterCopy = $yearFilter.clone();
  $yearFilterCopy.addClass('search-dropdown-one-copy')
  $yearFilter.parents('.select-filter-group').append($yearFilterCopy);
  $yearFilterCopy.hide();
  
  
  //var $yearFilter = $(".search-dropdowns-one");
  $yearFilterCopy.find("option").map(function() {
      var $this = $(this);
      var $liItem = $("<li>");
      $liItem.attr({
      	class: 'list-group-item list-group-item-action',
        type: 'button'
      });
      
      return $liItem.attr(
      	"data-value", $this.attr("value")).text($this.text()).get();
       
  }).appendTo($("<div>").attr({
      class: $yearFilter.attr("class") + ' list-group standard-search',
      name: $yearFilter.attr("name")
  })).parent().replaceAll($yearFilter);
  
  $yearFilter.removeClass('form-control');
  
  
  
  $('.standard-search').on('click', '.list-group-item', function(){
    $(this).parents('.list-group').find('.list-group-item.active').removeClass('active');
    $(this).addClass('active');
    console.log('selected value: ');
    $('select.search-dropdown-one').val($(this).data('value')).change();
//    $('.select-filter-group').find('select.search-dropdown-one').val()
  });
  
  $('.select-filter-group').on('change', 'select.search-dropdown-one', function(){
  	console.log('===> change select option: ' + $(this).val());
  });
  
   //var $yearFilter = $(".search-dropdowns-one");
  /*
  $yearFilterCopy.find("option").map(function() {
      var $this = $(this);
      return $("<li>").attr("value", $this.attr("value")).text($this.text()).get();
  }).appendTo($("<ul>").attr({
      id: $yearFilter.attr("id"),
      name: $yearFilter.attr("name")
  })).parent().replaceAll($yearFilter);
  */


});