selectbox custom scroll cu JavaScrpt

[dim]

Am inlocuit ce mi-ai dat tu plus cele doua optiuni pt a inchide fereastra si acum este ok le afiseaza si in Internet Explorer 11 si in
Safari

Cod: Selectaţi tot

elms[n].addEventListener('mousedown', function(e){
    if(e.target.size<4){

Cod: Selectaţi tot

 elms[n].addEventListener('blur', function(e){

Cod: Selectaţi tot

elms[n].addEventListener('change', function(e){

am inlocuit

Cod: Selectaţi tot

e.target.scrollTo(0, 2345);

cu

Cod: Selectaţi tot

 e.target.scrollTop = 2345; 

si acum le afisaza de la 1 pe toate

singura problema pe care o mai am acum in Safari este ca im deruleaza meniu il aranjza cum trebuie da nu ramne blocat sa pot sa aleg din el si nici nu afiseza nici o eroare

salut am modificat scriptul si am adaugat:

Cod: Selectaţi tot

document.getElementById('sel').addEventListener('click', onClickHandler);
document.getElementById('sel').addEventListener('mousedown', onMouseDownHandler);

function onMouseDownHandler(e){
	var el = e.currentTarget;
	
    if(el.hasAttribute('size') && el.getAttribute('size') == '1'){
    	e.preventDefault();    
    }
}
function onClickHandler(e) {
 	var el = e.currentTarget; 

    if (el.getAttribute('size') == '1') {
        el.className += " selectOpen";
        el.setAttribute('size', '5');
    }
    else {
        el.className = '';
        el.setAttribute('size', '1');
    }
}

acum imi deschide si inchide ferestra si in Safari doar ca se aplica primului element la restu nu are efect

Incearca scriptul urmator; am adaugat si codul de la tine:

Cod: Selectaţi tot

<select class='sel_cust_op' data-sel_op='50,48' name="quantity[{{ product['cart_id'] }}]"></select> - 
<select class='sel_cust_op' data-sel_op='20,8' name="quantity[{{ product['cart_id'] }}]"></select> - 
<select class='sel_cust_op' data-sel_op='25,17' name="quantity[{{ product['cart_id'] }}]"></select>

<script>
//From: https://marplo.net/

var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); //True daca e Safari

//Receives: elms=array with <select> objects
function customSelOp(elms){
  //parcurge array-ul
  for(var n=0; n<elms.length; n++){
    //preia valorile din atributul 'data-sel_op', le separa dupa ',' si le adauga ca numere in 2 variabile
    var ar_atr = elms[n].getAttribute('data-sel_op').split(',');
    var nr_op = ar_atr[0].trim()*1;  //numar de optiuni
    var sel_op = ar_atr[1].trim()*1; //optiunea selectata
    var str_op ='';  //pt. sirul cu optiuni
    var str_sel_op ='';  //pt. sirul cu optiunea selectata

    //construeste sirurile cu optiuni
    for(var i=nr_op; i>0; i--){
      if(i ==sel_op) str_sel_op ='<option onclick="this.parentNode.size=1" selected value="'+i+'">'+i+'</option>'; //la clic pe ea face size 1 la elementul parinte
      else str_op +='<option value="'+i+'">'+i+'</option>';
    }

    //adauga optiunile si cea selectata la urma
    elms[n].innerHTML = str_op + str_sel_op;

    //inregistrare evenimente

    elms[n].addEventListener('mousedown', function(e){
      if(is_safari){
        var el = e.currentTarget; 

        if (el.getAttribute('size') =='1'){
            el.className +=' selectOpen';
            el.setAttribute('size', '5');
        }
        else {
            el.className ='';
            el.setAttribute('size', '1');
        }
      }
 
      if(e.target && e.target.size<4){
        if(e.target.options.length>5) e.target.size =5; //nr. optiuni vizibile
        e.target.scrollTop =2345; //face scroll in jos de tot in lista select
      }
    });

    //la click pe lista
    elms[n].addEventListener('click', function(e){
      var el = e.currentTarget;
      if(el.hasAttribute('size') && el.getAttribute('size') =='1') e.preventDefault();
    });

    //la click in afara listei seteaza size 1
    elms[n].addEventListener('blur', function(e){
      e.target.size =1;
    });

    //la evenimentul change face size 1 si trimite form-ul in care e lista
    elms[n].addEventListener('change', function(e){
      e.target.size =1;
      e.target.form.submit();
    });
  }
}

//preia elementele select cu class='sel_cust_op' si apeleaza functia cu ele
const sel_cust_op = document.querySelectorAll('select.sel_cust_op');
customSelOp(sel_cust_op);
</script>