cum pot sa fac un script prin care sa pot sa afisez in dropdowns maxim 5 randuri pe care sa le aseze desupra butonului si sa porneasca in tot deuna lista le la 1 indiferent de valuarea selectata ceva de genu asta
nr.png (2.18KiB)Vizualizat de 1287 ori
si tot in script daca pot sa introduc ccs pt modificare scrollbar
am incercar cu ::-webkit-scrollbar da nu a functionat
multumesc
selectbox custom scroll cu JavaScrpt
Scris: Mie Oct 16, 2019
de MarPlo
Poti sa folosesti atributul size pentru determinarea numarului de optiuni vizibile.
De exempu:
am incercat scriptul de la tine si functioneaza doar pt primul produs din lista, urmatoarele nu le mai modifica iar let ex_sel_op =48 daca ii dau valoarea let ex_sel_op ="quantity[{{ product['cart_id'] }}]" nu imi mai afiseaza in ordine.
M-am uita si prin tutorialele cu jQuery dar nu am gasit ceva cre sa ma ajute in sensu asta.
As dori daca se poate doar sa imi puna lista deasupra in tot deuna indiferent de pozita in pagina si sa o afiseze mereu de la 1
selectbox custom scroll cu JavaScrpt
Scris: Joi Oct 17, 2019
de MarPlo
Se poate modifica codul de la primul raspuns ca sa functioneze cu mai multe liste.
Daca ai pus quantity[{{ product['cart_id'] }}] pentru optiunea selectata nu functioneaza fiindca acela reprezinta id-ul /numele. Probabil valoarea selectata e la: {{ product['quantity'] }}
Incearca codul din exemplu de mai jos.
- Ca sa functioneze, fiecare tag <select> e necesar sa aibe aceasta sintaxa:
Multumes
Prima varianta este ok functioneaza acum pt toate produsele.
Cand ai timp si poti as vrea daca poti sa faci si comentariile pt fiecare linie de cod creata ca sa si inteleg mecanismu
acum am copiat ca papagalu .
Singuru dezavantaj este nu se inchide inapoi fereastra in cazul in care apas valorea deja selectata sau langa tabel
selectbox custom scroll cu JavaScrpt
Scris: Joi Oct 17, 2019
de MarPlo
Ai codul cu explicatii si va inchide lista select la clic in afara sau pe oricare optiune.
<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/
//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', (e)=>{
if(e.target.options.length>5)e.target.size =5; //nr. optiuni vizibile
e.target.scrollTo(0, 2345); //face scroll in jos de tot in lista select
});
//la click in afara listei seteaza size 1
elms[n].addEventListener('blur', (e)=>{
e.target.size =1;
});
//la evenimentul change face size 1 si trimite form-ul in care e lista
elms[n].addEventListener('change', (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>
selectbox custom scroll cu JavaScrpt
Scris: Joi Oct 17, 2019
de dim
Multumesc mult pt ajutor am verificat acum si functioneaza perfect.
Mai am cateva modificar de facut cu css pt aspect,
in mare am reusit sa il modific. Bara de scroll nu prea merge schimbata
am incercat cu -webkit-scrollbar si il modifica dor in chrome.
Da oricum asta e alta problema si daca nu reusesc singur o sa deschid alta pagina in categoria css.
Multumesc inca o data
Re: selectbox custom scroll cu JavaScrpt
Scris: Vin Oct 18, 2019
de dim
Salut
Am revenit dupa ce am testa scriptul in mai multe browsere:
Chrome - ok;
Mozilla Firefox - ok;
Opera - ok;
Maxthon 4.4 - ok; Microsoft Edge - Imi afiseaza lista derulata la 50 si nu se paote selecta valoarea!!! Internet Explorer 11 - Nu afiseza nimic in lista si nici ca nr selectat!!! Safari -Nu afiseza nimic in lista si nici ca nr selectat!!!
Nu am putut testa de pe mobil.
Intrebarea este daca se paote rezolva si problema asta??
selectbox custom scroll cu JavaScrpt
Scris: Vin Oct 18, 2019
de MarPlo
Inlocuieste inregistrarea 'mousedown' din codul anterior cu acesta:
elms[n].addEventListener('mousedown', (e)=>{
if(e.target.size<4){
if(e.target.options.length>5)e.target.size =5; //nr. optiuni vizibile
e.target.scrollTo(0, 2345); //face scroll in jos de tot in lista select
}
});
Rezolva problema de selectare in Microsoft Edge.
Functia scrollTo() nu functioneaza in Microsoft Edge si nu am gasit alternatjva, de aceea in el nu merge scroll la prima optiune de jos.
Nu am Internet Explorer 11 si nici Safari pentru test.
selectbox custom scroll cu JavaScrpt
Scris: Lun Oct 21, 2019
de dim
Internet Explorer 11 il gasesti instalat cu sigurant in windows accessories daca ai win 10 instalat
ideea e ca in ambele si in ie11 si in safari in console da eroare
.