étendre zone déroulante ci-dessus au lieu de ci-dessous avec javascript

Question

Ok donc l'histoire est mes utilisateurs ont besoin d'une liste déroulante multi-sélection, qui n'existe pas dans ASP.NET, alors la solution simple que je vais avec est que je suis en utilisant listboxes avec multiselect sur et je les lance à la taille 1, et onmouseover je change la taille pour dire 10, onmouseout le ramène à un. Assez simple et les utilisateurs ne connaissent pas la différence. Maintenant, mon problème vient du fait que depuis que j'ai un certain nombre de contrôles sur mon application web, j'ai mis ces listboxes à des numéros z-index plus élevés que les autres contrôles, ce qui crée un problème: sur mes listboxes plus près du bas de la page, la liste se développe ci-dessous et pas au-dessus, et une partie de la listbox va en bas de la page mais depuis onmouseout réinitialise la taille de la listbox je ne peux pas faire défiler la page.

Est-ce que quelqu'un sait ce que j'ai besoin de régler pour l'agrandir plutôt que de le baisser?

modifier En outre, certains peuvent se demander « pourquoi ne pas vous réorganisez juste la zone de liste à une position plus élevée dans la page, » la raison pour laquelle ce n'est pas une option viable est que j'ai plus de 40 contrôles sur la page et ils sont groupés de façon cohérente, je ne les ai pas simplement placés au hasard (c'est-à-dire information d'investissement dans une section, compte dans une autre, pertinence dans une autre)

Answer 1

EDIT: Il est intéressant de noter que le jQuery La version ci-dessous sera plus compacte et, à mon avis, plus facile à comprendre.

Glo, le code que vous avez actuellement serait utile ici, d'autant qu'il semble que vous aurez du mal à changer tout ce que nous donnons, ou à implémenter ce que nous pourrions décrire. Quoi qu'il en soit, cela fonctionne comme prévu dans IE7, Firefox et Opera; Safari et Chrome vont bizarrement avec: http://jsfiddle.net/bUFzq/35/ (modifié de http://www.plus2net.com/html_tutorial/html_frmddl.php).

Le CSS rend juste la position sélectionnable par rapport à son emplacement par défaut. Les éléments ne peuvent être positionnés que par rapport aux autres éléments positionnés. `position: relative; ' laisse l'élément où il était jusqu'à ce que vous le déplaciez, contrairement à absolu et fixe. Il se positionne également par rapport aux bords de son ancêtre le plus proche. (L'industrie informatique a la malheureuse convention d'augmenter Y vers le bas plutôt que vers le haut, juste en haut ou en bas.)

element.offsetHeight est la hauteur calculée de l'élément - quelle est sa taille sur l'écran. element.style.bottom (comme ses cousins ​​top, left et right) définit le décalage de l'élément par rapport au bord correspondant, dans la direction du centre de l'élément. setAttribute est assez explicite; il agit comme si vous éditiez réellement le HTML. Most Les propriétés de element.style (qui ne figurent pas sur tous les autres objets) représentent et modifient des propriétés CSS nommées de la même manière. Par exemple, element.style.backgroundColor définit la propriété background-color.

addEvent est une fonction copiée à partir de Rock Solid addEvent() de Dustin Diaz car les navigateurs ne sont pas très d'accord sur la façon de faire des événements. Cependant, j'aurais mis son script dans un fichier séparé et le mien dans un autre si je ne travaillais pas dans une seule zone de script. J'ai fait `var addEvent = init(); ' chose juste pour ne pas avoir à faire défiler sa source, même si c'est un bon exemple de bon code.

mouseover & mouseout sont les auditeurs réels, explicitement appelé à l'aide apply 1) parce que je avais besoin que la valeur de la hauteur pour plus tard et 2) parce que, pour une raison quelconque (au moins dans jsFiddle), il ne démarre pas dans la bonne position, et seulement si les auditeurs sont appelés dans cet ordre, ils y arriveront.