Custom select

pytanie zadane 26 sierpnia 2019 w HTML i CSS przez MAXIM7 Obywatel (1,990 p.)
edycja 27 sierpnia 2019 przez MAXIM7

Cześć, napisałem swojego custom selecta, ale po dodaniu kilku takich na stronę, pojawił się problem, że po kliknięciu na jeden, rozwijają się opcje we wszystkich selectach. Naprawiłem to zmieniając po prostu nazwy pewnych klas w css, ale pojawił się kolejny problem polegający na uniwersalności funkcji do otwierania i zamykania selecta. Czy da radę ją jakoś przerobić tak, aby działała ona w zależności od klikniętego selecta? Oczywiści mogę po prostu skopiować te funkcje 7 razy i podmienić tylko nazwy klas w odpowiednich miejscach (.A), ale czy da radę to zrobić jakoś sprytniej?

-drop to nazwy selectów

-funkcja createDropdown tworzy opcje w selecie. Ta funkcja nie wymaga przeróbek, bo działa dla wszystkich selectów.

Chodzi mi o linię: $('.A').on('click', function(event). Jest tu wpisany select .A

$(document).ready(function()
{
  var drop = ['.A','.B','.C','.D','.E','.F','.G'];
   
  function createDropdown()
  {
    var CA = [];  /*tu wszędzie jest jakaś zawartość*/
    var CO = [];
    var K = [];
    var SC = [];
    var SF = [];
    var F = [];
    var C = [];
 
    var elements = [CA, CO, K, SC, SF, F, C];
 
    for(var i=0; i<drop.length; i++)
    {
      var htmlString = '<div class="dropContainer">';
 
      for(var j=0; j<elements[i].length; j++)
      {
        htmlString += '<div class="dropOption">'+elements[i][j]+'</div>';
      }
      htmlString += '</div>';
 
      ($(drop[i])).append(htmlString);
    }
  }
 
  createDropdown();
 
  var container = $('.dropContainer');
 
  /*Poniżej są funkcje dla konkretnego pojedynczego selecta*/
 
  $('.A').on('click', function(event)
  {
    var drop = $('.A');
    var target = $(event.target);
 
    if(target.hasClass('valueHolder') || target.attr('class') === '.A')
    {
        container.show();
        document.querySelector(".A").style.borderColor = "#FFAC0D";
        document.querySelector(".dropContainer").style.borderTopColor = "#FFAC0D";     
    }
    else if(target.hasClass('dropOption'))
    {
      drop.find('div.valueHolder').text(target.text());
      container.hide();
      document.querySelector(".A").style.borderColor = "#DDD";
    }
  });
 
  $(document).mouseup(function(e) 
  {
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
        document.querySelector(".A").style.borderColor = "#DDD";
    }
  });
});