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.
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
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)
