můj Selekt

by Petr Haluza

HTML

<div class="drop-down-select"> 

<select name="Payment" id="frm-cartDeliveryPayForm-Payment">
  <option selected value="">Zvolte způsob platby</option>
  <option value="1">Dobírkou ( + 36 Kč)</option>
  <option value="3">Platba kartou online ( + 0 Kč)</option>
  <option value="7">Převodem z účtu ( + 0 Kč)</option>
  <optgroup label="Platba online převodem">
    <option class="logo" style="background-image:url(https://payments.comgate.cz/assets/images/logos/BANK_CZ_CS_P.png?v=1.3);" value="BANK_CZ_CS_P">Česká spořitelna - PLATBA 24</option>
    <option class="logo" style="background-image:url(https://payments.comgate.cz/assets/images/logos/BANK_CZ_CSOB.png?v=1.3);" value="BANK_CZ_CSOB">ČSOB</option>
    <option class="logo" style="background-image:url(https://payments.comgate.cz/assets/images/logos/BANK_CZ_EB.png?v=1.3);" value="BANK_CZ_EB">Equa bank</option>
    <option class="logo" style="background-image:url(https://payments.comgate.cz/assets/images/logos/BANK_CZ_FB_P.png?v=1.3);" value="BANK_CZ_FB_P">Fio banka</option>
    <option class="logo" style="background-image:url(https://payments.comgate.cz/assets/images/logos/BANK_CZ_GE_2.png?v=1.3);" value="BANK_CZ_GE_2">MONETA Money Bank</option>
    <option class="logo" style="background-image:url(https://payments.comgate.cz/assets/images/logos/BANK_CZ_KB.png?v=1.3);" value="BANK_CZ_KB">Komerční Banka - Mojeplatba</option>
  </optgroup>
</select>

</div>

<p id="selected"></p>

CSS

/*.drop-down-select{position:relative; width:auto; margin-top:0; }
.drop-down-select select{display:none; }
.drop-down-select .select-list{position:absolute; top:0; left:0; z-index:1; margin-top:40px; padding:0; }
.drop-down-select .select-list li {display:none; }
.drop-down-select .select-list li span{ border: 2px solid #e5e5e5; ;display:flex; align-items: center; min-height:40px; min-width:280px; width:100%; padding:5px 15px; font-size:16px; text-align:left; box-sizing:border-box; cursor:pointer }
.drop-down-select .select-list li span.logo{ padding: 5px 15px 5px 95px; background-size: 80px auto;background-position:left 10px center; background-repeat:no-repeat; font-size:12px;}
.drop-down-select .select-list li span:hover {color:#a00 }

JavaScript

jQuery().ready(function() {  
/* Custom select design */    
  jQuery('.drop-down-select').append('<div class="button"></div>');    
  jQuery('.drop-down-select').append('<ul class="select-list"></ul>');    
  jQuery('.drop-down-select select option').each(function() {  
  var bg = jQuery(this).css('background-image');    
    jQuery('.select-list').append('<li class="clsAnchor"><span value="' + jQuery(this).val() + '" class="' + jQuery(this).attr('class') + '" style=background-image:' + bg + '>' + jQuery(this).text() + '</span></li>');   
  });    
  jQuery('.drop-down-select .button').html('<span style=background-image:' + jQuery('.drop-down select').find(':selected').css('background-image') + '>' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Zvol</a>');   
  jQuery('.drop-down-select ul li').each(function() {   
  if (jQuery(this).find('span').text() == jQuery('.drop-down-select select').find(':selected').text()) {  
  jQuery(this).addClass('active');       
  }      
  });     
  jQuery('.drop-down-select .select-list span').on('click', function()
  {          
  var dd_text = jQuery(this).text();  
  var dd_img = jQuery(this).css('background-image'); 
  var dd_val = jQuery(this).attr('value');   
  //jQuery('.drop-down-select .button').html('<span style=background-image:' + dd_img + '>' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');      
  jQuery('.drop-down-select .button').html('<span>' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Změnit</a>');      
  jQuery('.drop-down-select .select-list span').parent().removeClass('active');    
  jQuery(this).parent().addClass('active');     
  $('.drop-down-select select[name="Payment"]').val( dd_val ); 
  // log vybranych hodnot - 1. je kliknuta hodnota, 2. vypisuje, co je realne vybrano v selectu
  console.log(dd_val);
  console.log($('.drop-down-select...