Öppna <select> vid tab eller click.

Permalänk
Medlem

Öppna <select> vid tab eller click.

Hej,

i dagsläget har vi på jobbet byggt en webbapplikation, med hjälp av angularjs, jquery och asp.net mvc, som är en intervju. Användaren får svara på olika typer av frågor där en typ är en dropdownmeny med flerval. Finns ett directive som håller koll på dropdownmenyn.

Dropdownmenyn är uppbyggd av en select med ett antal options, allt hämtas dynamiskt från en databas.

Klickar man på dropdownmenyn fälls den ut, väljer man ett val så fälls den ihop. Så långt är allt bra.

Nu vill vi även att den ska fällas ut när man tabbar till den och fällas in om man trycker på enter. I dag har jag löst det med en focus trigger som öppnar och en keyup för enter. För att fälla ut en select programmatiskt har jag löst det med

$(this).attr("size", len).css('z-index', '3');

där len är antal options, denna körs när den får fokus.

Problemet blir då att jag inte kan välja en option för att den ska fällas ihop, för den behåller ändå fokus. Så det har jag löst med ett click event som ser ut såhär

$(this).attr("size", 1).css('z-index', '1');

Det jag behöver hjälp med nu är:

Om jag inte har fokus på dropdownmenyn och trycker på den så får den fokus och öppnas, men stängs direkt pga click-eventet.

Hur gör jag?

Tack på förhand.

EDIT:

Lyckades lösa det själv,
satte

$(this).data("focused", true);

vid focus sedan

jqElem.on('change keydown mouseup', function (e) { if (e.which == 38 || e.keyCode == 38 || e.which == 40 || e.keyCode == 40) { } else if (e.which == 13 || e.keyCode == 13) { $(this).attr("size", 1).css('z-index', '1'); } else if ($(this).data("focused")) { $(this).data("focused", false); } else if (!$(this).data("focused")) { $(this).attr("size", 1).css('z-index', '1'); } });

Ingen vacker lösning direkt, men verkar fungera för tillfället.

Visa signatur

Outtröttlig, löpartokig besserwisser!

Bli vegan! För djuren, planeten, hälsan och våra barns skull!