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>

Multumesc pt ajutor este ok acum ar mai trebui si o linie scrisa care sa determine marimea tabelului pt scroll in jos pentru a inlocui valoarea 2345

Cod: Selectaţi tot

e.target.scrollTop =2345; //face scroll in jos de tot in lista select

pt ca in safari ar trebui sa ii dai valore fixa cat este de mare sa deruleze
da dupa mai multe incercari gasesti numarul relativ in cazu asta la mine a fost 1800 si le deruleaza aprope bine .

Multumesc inca o data