select javascript probleme d'affichageRésolu

Question

Bonjour

Je viens poser ma question ici , en espérant que j'aurais une réponse. Je suis tout nouveau en javascript et j'ai un petit problème . J'ai créer des menu select sur ma page html , que j'ai personnalisé grâce a javascript . A mes selects j'ai rajouté pour certain une scrollbar directement avec le css (overflow:auto) .Maintenant j'ai mis chacun de mes select dans une div differentes pour chacun . Les un en dessous des autres, En definissant une hauteur suffisante pour quel puisse afficher le contenu du select . Mais lorsque que je clique sur un select celui se deroule derrière les autres selects . Par exemple en prenant le code ci dessous , lorsque je clique sur menu deroulant 1 , son contenu (commercial,rooms,... ,)s'affiche derrière mon menu deroulant 2. J'ai mis mes div en absolue et essayer de joué avec le z-index mais rien y fait . Quel peut-il m'aider . Merci beaucoup.

 
 
    
       
    
    Menu deroulant 1
Commercial
Rooms
Short-term
    
      
    
    

    
    
    	
 
    
 
    
       
    
Menu deroulant 2
Apartment
Flat
House
Other
Site
Studio/Bedsit
    
      
    
    
 

// = 0) {
                    selectMe(ul.childNodes[this.prev]);
                }
                break;
            // next 
            case 39: // right
            case 40: // down
                if (this.next < ul.childNodes.length) {
                    selectMe(ul.childNodes[this.next]);
                }
                break;
            // goto the beginning of the list 
            case 33: // page up
            case 36: // home
                selectMe(ul.firstChild);
                break;
            // goto the end of the list 
            case 34: // page down
            case 35: // end
                selectMe(ul.lastChild);
                break;
        }
    };
    obj.parentNode.insertBefore(ul, obj);
}
function selectMe(obj) {
    var lis = obj.parentNode.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
        if (lis[i] != obj) {
            lis[i].className = '';
            lis[i].onclick = function () {
                selectMe(this);
            };
        } else {
            setVal(obj.selectID, obj.selIndex);
            obj.className = 'selected';
            obj.parentNode.className =
            obj.parentNode.className.replace(new RegExp(" selectOpen\b"), '');
            obj.onclick = function () {
                obj.parentNode.className += ' selectOpen';
                this.onclick = function () {
                    selectMe(this);
                };
            };
        }
    }
}
function setVal(objID, val) {
    var obj = document.getElementById(objID);
    obj.selectedIndex = val;
}
function setForm() {
    var s = document.getElementsByTagName('select');
    for (var i = 0; i < s.length; i++) {
        selectReplacement(s[i]);
    }
}
window.onload = function () {
    (document.all && !window.print) ? null : setForm();
};


J'ai directement pris le code sur une source pour le java , peut être que c'est de la que viens le problème.

PetoleTeam · Accepted Answer

Bonjour,
je ne voyais pas cela comme ça mais plutôt en partant du script de ton premier post, un truc du style
var MaxIndex = 1000; // zIndex a top en global ici
function selectReplacement(obj) {
    obj.className += ' replaced';
    var ul = document.createElement('ul');
    ul.className = 'selectReplacement';
    ul.style.zIndex = MaxIndex--; // affectation puis decrementation pour suivant
//...le reste du code

;O)

cs_Julien39 · Answer

Il faut que tu poses ta question sur le forum javascript

cs_DARKSIDIOUS · Answer

Salut,

Oui tu es ici sur le forum java et non javascript : ce sont deux langages qui n'ont pas grand chose en commun si ce n'est le mot java.

Je déplace vers le forum javascript.
______________________________________

AVANT de poster votre message, veuillez lire, comprendre, et appliquer notre réglement

PetoleTeam · Answer

Bonjour,
j'ai mis mes div en absolue et essayer de joué avec le z-index mais rien y fait
d'après ce que je vois ce n'est pas sur les DIVs qu'il faut mettre le z-Index mais sur les ULs, le DIV ne s'étirant pas.
;O)

ulmo22 · Answer

Bonjour , dsl pour l'erreur de forum

j'ai autrement essayer les Uls , mais je vois pas bien la différence , car je dois quand meme définir une taille a mes ULs et une position . 

    


     
    
       
    
    Menu deroulant 1
Commercial
Rooms
Short-term
    
      
    
    
    
    
     
    
    

Property Type
Apartment
Flat
House
Other
Site
Studio/Bedsit
     
      
    
    

     
    
       
    	
Select County
Antrim
Armagh
Carlow
Cavan
Clare
Cork
Derry 
Donegal
Down
Dublin
Fermanagh
Galway	
    
      
    
    

    



#col3
{position: relative;
 z-index: auto;
 width: 262px;
 height: 445px;
 text-align: left;
 float: left;
 background-image: url('../images/home_05.jpg');
 background-repeat: no-repeat}

#ul1
{   z-index: 3000;
    position: absolute;
    top: 125px;
    left: -30px;}
    
#ul2
{   z-index: 2999;
    position: absolute;
    top: 160px;
    overflow: auto;
    height: 100px;
    width: 230px;
    left: -30px;}

#ul3
{   z-index: 2998;
    position: absolute;
    top: 200px;
    overflow: auto;
    height: 100px;
    width: 230px;
    left: -30px;}

pour les 2 premiers menus (Ul1 et Ul2) sa marche , mais pas pour le 3ème , celui ci ne veut pas se dérouler .Je comprends pas . Merci de votre aide

ulmo22 · Answer

Super sa marche nickel maintenant , merci bcp.

Select javascript probleme d'affichage

6 réponses

Votre réponse

Discussions similaires