[Résolu] [DOM]un bug avec insertbefore par xavierm02 - page 1

bonjour!
voici mon problème:
-j'ai un code qui marche très bien :

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:1px solid #4FBAB3;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
	padding:5px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-khtml-border-radius:10px;
}
 
.liste a{
	display:block;
	cursor:default;
	color:#000;
	text-decoration:none;
	background:#fff;
}
 
.liste a:hover{
	color:white;
	background-color:#7370CB;
}
.aenlever
{
display:none;
}
</style>
<script type="text/javascript">
var timer;
var fleche='<img style=width:10px;width:10px;" src="http://photoxbc2.free.fr/xbc/flechebas.gif" alt="&darr;" />';
function montrerliste(obj)
{
	cacherlistes(obj.parentNode.getElementsByTagName('div')[0]);;
	if(obj.parentNode.getElementsByTagName('div')[0].style.display == 'block')
	{
		obj.parentNode.getElementsByTagName('div')[0].style.display='none';
		cacherlistes();
	}
	else
	{
		obj.parentNode.getElementsByTagName('div')[0].style.display='block';
		toutcacher();
	}
}
function validerliste(txt, id, idhidden)
{
	document.getElementById(idhidden).value = txt;
	var obj=document.getElementById(id);
	obj.parentNode.style.display = 'none';
	obj.parentNode.parentNode.getElementsByTagName('p')[0].innerHTML = fleche+obj.innerHTML;
}





function cstmGetElementsByClassNameExt(parentElement, class_name, tag) {
    /* Extendeds function with performance improvements.
     * by using a parentElement and the tag the class is on
     * the list of elements to check is reduced.
     *
     * This function doesn't get bound to an object.
     */
    var docList;
    var matchArray;
    var re;
    var len;
    
    tag = tag || "*";
    parentElement = parentElement || document;
    if (typeof parentElement == "string") //object could be passed instead of Id
        parentElement = document.getElementById(parentElement);
        
    /* Get array of tags */
    if (tag == "*") {
       /* The test is to accommodate IE 5, 
        * leave it out if IE 5 support is not required 
        */
       docList = parentElement.all || parentElement.getElementsByTagName('*');
    } else {
       docList = parentElement.getElementsByTagName(tag);
    }

    /*Create a regular expression object for class*/
    re = new RegExp("(?:^|\\s)" + class_name + "(?:\\s|$)");

	/* Create output array*/
    matchArray = new Array();
    len = docList.length;
    
    /* Populate output array from tag array 
     * do loop is faster than for loop 
     * albeit out is in reverse order
     */
    while (len--) {
        if (re.test(docList[len].className)) {            
            matchArray[matchArray.length] = docList[len];
        }
    }
    //return matchArray.reverse(); //if the order needs to forward
    return matchArray;
}
function cacherlistes(obj)
{
	listes=cstmGetElementsByClassNameExt(document,"liste");
	for(cacherliste=0;cacherliste<listes.length;cacherliste++)
	{
		if(listes[cacherliste]!=obj)
		{
			listes[cacherliste].style.display='none';
		}
	}
	clearTimeout(timer);
}
function toutcacher(cacherok)
{
	if(!surliste)
	{
		if(cacherok)
		{
			cacherlistes();
		}
		else
		{
			timer=setTimeout("toutcacher(true);",2500);	
		}
	}
}
function setForm()
{
	var asuprimer= new Array();
	selects = document.getElementsByTagName('select');
	for(i=0; i<selects.length; i++)
	{
		obj=selects[i];
		newinput = document.createElement("input");
		newinput.setAttribute('type','hidden');
		newinput.setAttribute('id',obj.id);
		newinput.setAttribute('name',obj.name);
		obj.parentNode.appendChild(newinput);
		
		newdiv = document.createElement("div");
		newdiv.setAttribute('class','blockliste');
		newdiv.setAttribute('className','blockliste');
		obj.parentNode.appendChild(newdiv);
		
		newp = document.createElement("p");
		newp.onclick=function() {clearTimeout(timer);montrerliste(this);};
		newdiv.appendChild(newp);
		
		newliste=document.createElement("div");
		newliste.setAttribute('class','liste');
		newliste.setAttribute('className','liste');
		newliste.onmouseover=function(){surliste=true;}
		newliste.onmouseout=function(){surliste=false;timer=setTimeout("toutcacher(true)",1000);}
		newdiv.appendChild(newliste);
		
		options=document.getElementById(obj.id).getElementsByTagName('option');
		for(j=0;j<options.length;j++)
		{
			if(j==0)
			{
				if(obj.title!='')
				{
					newp.innerHTML=fleche+obj.title;
				}
				else
				{
					newp.innerHTML=fleche+options[j].innerHTML;
				}	
			}
			newa = document.createElement("a");
			newa.setAttribute('href','javascript:void(0)');
			newa.setAttribute('id',obj.id+j);
			eval("newa.onclick=function(){validerliste('"+options[j].value+"', this.id,'"+obj.id+"');}");
			newa.onmouseover=function(){surliste=true;}
			newa.innerHTML=options[j].innerHTML+'<br>';
			newliste.appendChild(newa);
		}
	obj.removeAttribute('name');
	obj.removeAttribute('id');
	obj.setAttribute('class','aenlever');
	obj.setAttribute('className','aenlever');
	obj.innerHTML='';
	asuprimer[i]=obj;//ici, quand je fait obj.parentNode.removeChild(obj)   , ca ne marche pas... et je comrpend apspourquoi...
	}
	nbasuprimer=asuprimer.length;
	for(k=0;k<nbasuprimer;k++)
	{
		asuprimer[k].parentNode.removeChild(asuprimer[k]);
	}
}
var surliste=false;
window.onload = function() {
  setForm();
}
</script>
</head>
<body>
<span id="test">AVANT</span>:<br>
	<select id="something" name="something" title="1">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
		<option value="4">This is option 4</option>
		<option value="5">This is option 5</option>
	</select>
	<select id="somethingelse" name="somethingelse" title="2">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
	</select>
<div style="position:absolute;right:0px;top:0px;">
	<select id="somethingdone" name="somethingdone">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
	</select>
</div>
<br>APRES:<br>
</body>
</html>

mais je veux que les div se mettent exactement à l'emplacement des selects
donc je fais ça :

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:1px solid #4FBAB3;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
	padding:5px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-khtml-border-radius:10px;
}
 
.liste a{
	display:block;
	cursor:default;
	color:#000;
	text-decoration:none;
	background:#fff;
}
 
.liste a:hover{
	color:white;
	background-color:#7370CB;
}
.aenlever
{
display:none;
}
</style>
<script type="text/javascript">
var timer;
var fleche='<img style=width:10px;width:10px;" src="http://photoxbc2.free.fr/xbc/flechebas.gif" alt="&darr;" />';
function montrerliste(obj)
{
	cacherlistes(obj.parentNode.getElementsByTagName('div')[0]);;
	if(obj.parentNode.getElementsByTagName('div')[0].style.display == 'block')
	{
		obj.parentNode.getElementsByTagName('div')[0].style.display='none';
		cacherlistes();
	}
	else
	{
		obj.parentNode.getElementsByTagName('div')[0].style.display='block';
		toutcacher();
	}
}
function validerliste(txt, id, idhidden)
{
	document.getElementById(idhidden).value = txt;
	var obj=document.getElementById(id);
	obj.parentNode.style.display = 'none';
	obj.parentNode.parentNode.getElementsByTagName('p')[0].innerHTML = fleche+obj.innerHTML;
}





function cstmGetElementsByClassNameExt(parentElement, class_name, tag) {
    /* Extendeds function with performance improvements.
     * by using a parentElement and the tag the class is on
     * the list of elements to check is reduced.
     *
     * This function doesn't get bound to an object.
     */
    var docList;
    var matchArray;
    var re;
    var len;
    
    tag = tag || "*";
    parentElement = parentElement || document;
    if (typeof parentElement == "string") //object could be passed instead of Id
        parentElement = document.getElementById(parentElement);
        
    /* Get array of tags */
    if (tag == "*") {
       /* The test is to accommodate IE 5, 
        * leave it out if IE 5 support is not required 
        */
       docList = parentElement.all || parentElement.getElementsByTagName('*');
    } else {
       docList = parentElement.getElementsByTagName(tag);
    }

    /*Create a regular expression object for class*/
    re = new RegExp("(?:^|\\s)" + class_name + "(?:\\s|$)");

	/* Create output array*/
    matchArray = new Array();
    len = docList.length;
    
    /* Populate output array from tag array 
     * do loop is faster than for loop 
     * albeit out is in reverse order
     */
    while (len--) {
        if (re.test(docList[len].className)) {            
            matchArray[matchArray.length] = docList[len];
        }
    }
    //return matchArray.reverse(); //if the order needs to forward
    return matchArray;
}
function cacherlistes(obj)
{
	listes=cstmGetElementsByClassNameExt(document,"liste");
	for(cacherliste=0;cacherliste<listes.length;cacherliste++)
	{
		if(listes[cacherliste]!=obj)
		{
			listes[cacherliste].style.display='none';
		}
	}
	clearTimeout(timer);
}
function toutcacher(cacherok)
{
	if(!surliste)
	{
		if(cacherok)
		{
			cacherlistes();
		}
		else
		{
			timer=setTimeout("toutcacher(true);",2500);	
		}
	}
}
function setForm()
{
	var asuprimer= new Array();
	selects = document.getElementsByTagName('select');
	for(i=0; i<selects.length; i++)
	{
		obj=selects[i];
		newinput = document.createElement("input");
		newinput.setAttribute('type','hidden');
		newinput.setAttribute('id',obj.id);
		newinput.setAttribute('name',obj.name);
		obj.parentNode.insertBefore(newinput, obj);
		
		newdiv = document.createElement("div");
		newdiv.setAttribute('class','blockliste');
		newdiv.setAttribute('className','blockliste');
		obj.parentNode.appendChild(newdiv);
		
		newp = document.createElement("p");
		newp.onclick=function() {clearTimeout(timer);montrerliste(this);};
		newdiv.appendChild(newp);
		
		newliste=document.createElement("div");
		newliste.setAttribute('class','liste');
		newliste.setAttribute('className','liste');
		newliste.onmouseover=function(){surliste=true;}
		newliste.onmouseout=function(){surliste=false;timer=setTimeout("toutcacher(true)",1000);}
		newdiv.appendChild(newliste);
		
		options=document.getElementById(obj.id).getElementsByTagName('option');
		for(j=0;j<options.length;j++)
		{
			if(j==0)
			{
				if(obj.title!='')
				{
					newp.innerHTML=fleche+obj.title;
				}
				else
				{
					newp.innerHTML=fleche+options[j].innerHTML;
				}	
			}
			newa = document.createElement("a");
			newa.setAttribute('href','javascript:void(0)');
			newa.setAttribute('id',obj.id+j);
			eval("newa.onclick=function(){validerliste('"+options[j].value+"', this.id,'"+obj.id+"');}");
			newa.onmouseover=function(){surliste=true;}
			newa.innerHTML=options[j].innerHTML+'<br>';
			newliste.appendChild(newa);
		}
	obj.removeAttribute('name');
	obj.removeAttribute('id');
	obj.setAttribute('class','aenlever');
	obj.setAttribute('className','aenlever');
	obj.innerHTML='';
	asuprimer[i]=obj;//ici, quand je fait obj.parentNode.removeChild(obj)   , ca ne marche pas... et je comrpend apspourquoi...
	}
	nbasuprimer=asuprimer.length;
	for(k=0;k<nbasuprimer;k++)
	{
		asuprimer[k].parentNode.removeChild(asuprimer[k]);
	}
}
var surliste=false;
window.onload = function() {
  setForm();
}
</script>
</head>
<body>
<span id="test">AVANT</span>:<br>
	<select id="something" name="something" title="1">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
		<option value="4">This is option 4</option>
		<option value="5">This is option 5</option>
	</select>
	<select id="somethingelse" name="somethingelse" title="2">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
	</select>
<div style="position:absolute;right:0px;top:0px;">
	<select id="somethingdone" name="somethingdone">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
	</select>
</div>
<br>APRES:<br>
</body>
</html>

les input se placent bien (on peut les voir en les mettant en type="text") mais le texte ne s'affiches plus

firebug me dit que le p est vide... et quand je le modifie, je me rend compte que le div aussi l'est...

PS:même résultat avec replacechild

en bidouillant un peu, je suis arrivé à ça:
mais ça n'en change que 2 avec ie et 1 avec firefox... htlp svp

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:1px solid #4FBAB3;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
	padding:5px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-khtml-border-radius:10px;
}
 
.liste a{
	display:block;
	cursor:default;
	color:#000;
	text-decoration:none;
	background:#fff;
}
 
.liste a:hover{
	color:white;
	background-color:#7370CB;
}
.aenlever
{
display:none;
}
</style>
<script type="text/javascript">
var timer;
var fleche='<img style=width:10px;width:10px;" src="http://photoxbc2.free.fr/xbc/flechebas.gif" alt="&darr;" />';
function montrerliste(obj)
{
	cacherlistes(obj.parentNode.getElementsByTagName('div')[0]);;
	if(obj.parentNode.getElementsByTagName('div')[0].style.display == 'block')
	{
		obj.parentNode.getElementsByTagName('div')[0].style.display='none';
		cacherlistes();
	}
	else
	{
		obj.parentNode.getElementsByTagName('div')[0].style.display='block';
		toutcacher();
	}
}
function validerliste(txt, id, idhidden)
{
	document.getElementById(idhidden).value = txt;
	var obj=document.getElementById(id);
	obj.parentNode.style.display = 'none';
	obj.parentNode.parentNode.getElementsByTagName('p')[0].innerHTML = fleche+obj.innerHTML;
}





function cstmGetElementsByClassNameExt(parentElement, class_name, tag) {
    /* Extendeds function with performance improvements.
     * by using a parentElement and the tag the class is on
     * the list of elements to check is reduced.
     *
     * This function doesn't get bound to an object.
     */
    var docList;
    var matchArray;
    var re;
    var len;
    
    tag = tag || "*";
    parentElement = parentElement || document;
    if (typeof parentElement == "string") //object could be passed instead of Id
        parentElement = document.getElementById(parentElement);
        
    /* Get array of tags */
    if (tag == "*") {
       /* The test is to accommodate IE 5, 
        * leave it out if IE 5 support is not required 
        */
       docList = parentElement.all || parentElement.getElementsByTagName('*');
    } else {
       docList = parentElement.getElementsByTagName(tag);
    }

    /*Create a regular expression object for class*/
    re = new RegExp("(?:^|\\s)" + class_name + "(?:\\s|$)");

	/* Create output array*/
    matchArray = new Array();
    len = docList.length;
    
    /* Populate output array from tag array 
     * do loop is faster than for loop 
     * albeit out is in reverse order
     */
    while (len--) {
        if (re.test(docList[len].className)) {            
            matchArray[matchArray.length] = docList[len];
        }
    }
    //return matchArray.reverse(); //if the order needs to forward
    return matchArray;
}
function cacherlistes(obj)
{
	listes=cstmGetElementsByClassNameExt(document,"liste");
	for(cacherliste=0;cacherliste<listes.length;cacherliste++)
	{
		if(listes[cacherliste]!=obj)
		{
			listes[cacherliste].style.display='none';
		}
	}
	clearTimeout(timer);
}
function toutcacher(cacherok)
{
	if(!surliste)
	{
		if(cacherok)
		{
			cacherlistes();
		}
		else
		{
			timer=setTimeout("toutcacher(true);",2500);	
		}
	}
}
function setForm()
{
	var asuprimer= new Array();
	selects = document.getElementsByTagName('select');
	for(i=0; i<selects.length; i++)
	{
		obj=selects[i];
		
		newselect=document.createElement("div");
		//obj.parentNode.appendChild(newselect);
		
		newinput = document.createElement("input");
		newinput.setAttribute('type','hidden');
		newinput.setAttribute('id',obj.id);
		newinput.setAttribute('name',obj.name);
		newselect.appendChild(newinput);
		
		newdiv = document.createElement("div");
		newdiv.setAttribute('class','blockliste');
		newdiv.setAttribute('className','blockliste');
		newselect.appendChild(newdiv);
		
		newp = document.createElement("p");
		newp.onclick=function() {clearTimeout(timer);montrerliste(this);};
		newdiv.appendChild(newp);
		
		newliste=document.createElement("div");
		newliste.setAttribute('class','liste');
		newliste.setAttribute('className','liste');
		newliste.onmouseover=function(){surliste=true;}
		newliste.onmouseout=function(){surliste=false;timer=setTimeout("toutcacher(true)",1000);}
		newdiv.appendChild(newliste);
		
		options=document.getElementById(obj.id).getElementsByTagName('option');
		for(j=0;j<options.length;j++)
		{
			if(j==0)
			{
				if(obj.title!='')
				{
					newp.innerHTML=fleche+obj.title;
				}
				else
				{
					newp.innerHTML=fleche+options[j].innerHTML;
				}	
			}
			newa = document.createElement("a");
			newa.setAttribute('href','javascript:void(0)');
			newa.setAttribute('id',obj.id+j);
			eval("newa.onclick=function(){validerliste('"+options[j].value+"', this.id,'"+obj.id+"');}");
			newa.onmouseover=function(){surliste=true;}
			newa.innerHTML=options[j].innerHTML+'<br>';
			newliste.appendChild(newa);
		}
		obj.parentNode.replaceChild(newselect,obj);//ici
	/*obj.removeAttribute('name');
	obj.removeAttribute('id');
	obj.setAttribute('class','aenlever');
	obj.setAttribute('className','aenlever');
	obj.innerHTML='';
	asuprimer[i]=obj;//ici, quand je fait obj.parentNode.removeChild(obj)   , ca ne marche pas... et je comrpend apspourquoi...*/
	}/*
	nbasuprimer=asuprimer.length;
	for(k=0;k<nbasuprimer;k++)
	{
		asuprimer[k].parentNode.removeChild(asuprimer[k]);
	}*/
}
var surliste=false;
window.onload = function() {
  setForm();
}
</script>
</head>
<body>
<span id="test">AVANT</span>:<br>
	<select id="something" name="something" title="1">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
		<option value="4">This is option 4</option>
		<option value="5">This is option 5</option>
	</select>
	<select id="somethingelse" name="somethingelse" title="2">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
	</select>
<div style="position:absolute;right:0px;top:0px;">
	<select id="somethingdone" name="somethingdone">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
	</select>
</div>
<br>APRES:<br>
</body>
</html>

merci!

j'ai plus qu'à enlever le problème que le liste se referme direct quelquefois...et enlever les eval etc.

bref voici le code actuel pour ceux que ça interesse (personne? :euh:

)

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:1px solid #4FBAB3;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
	padding:5px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-khtml-border-radius:10px;
}
 
.liste a{
	display:block;
	cursor:default;
	color:#000;
	text-decoration:none;
	background:#fff;
}
 
.liste a:hover{
	color:white;
	background-color:#7370CB;
}
.aenlever
{
display:none;
}
</style>
<script type="text/javascript">
var timer;
var fleche='<img style=width:10px;width:10px;" src="http://photoxbc2.free.fr/xbc/flechebas.gif" alt="&darr;" />';
function montrerliste(obj)
{
	cacherlistes(obj.parentNode.getElementsByTagName('div')[0]);;
	if(obj.parentNode.getElementsByTagName('div')[0].style.display == 'block')
	{
		obj.parentNode.getElementsByTagName('div')[0].style.display='none';
		cacherlistes();
	}
	else
	{
		obj.parentNode.getElementsByTagName('div')[0].style.display='block';
		toutcacher();
	}
}
function validerliste(txt, id, idhidden)
{
	document.getElementById(idhidden).value = txt;
	var obj=document.getElementById(id);
	obj.parentNode.style.display = 'none';
	obj.parentNode.parentNode.getElementsByTagName('p')[0].innerHTML = fleche+obj.innerHTML;
}





function cstmGetElementsByClassNameExt(parentElement, class_name, tag) {
    /* Extendeds function with performance improvements.
     * by using a parentElement and the tag the class is on
     * the list of elements to check is reduced.
     *
     * This function doesn't get bound to an object.
     */
    var docList;
    var matchArray;
    var re;
    var len;
    
    tag = tag || "*";
    parentElement = parentElement || document;
    if (typeof parentElement == "string") //object could be passed instead of Id
        parentElement = document.getElementById(parentElement);
        
    /* Get array of tags */
    if (tag == "*") {
       /* The test is to accommodate IE 5, 
        * leave it out if IE 5 support is not required 
        */
       docList = parentElement.all || parentElement.getElementsByTagName('*');
    } else {
       docList = parentElement.getElementsByTagName(tag);
    }

    /*Create a regular expression object for class*/
    re = new RegExp("(?:^|\\s)" + class_name + "(?:\\s|$)");

	/* Create output array*/
    matchArray = new Array();
    len = docList.length;
    
    /* Populate output array from tag array 
     * do loop is faster than for loop 
     * albeit out is in reverse order
     */
    while (len--) {
        if (re.test(docList[len].className)) {            
            matchArray[matchArray.length] = docList[len];
        }
    }
    //return matchArray.reverse(); //if the order needs to forward
    return matchArray;
}
function cacherlistes(obj)
{
	listes=cstmGetElementsByClassNameExt(document,"liste");
	for(cacherliste=0;cacherliste<listes.length;cacherliste++)
	{
		if(listes[cacherliste]!=obj)
		{
			listes[cacherliste].style.display='none';
		}
	}
	clearTimeout(timer);
}
function toutcacher(cacherok)
{
	if(!surliste)
	{
		if(cacherok)
		{
			cacherlistes();
		}
		else
		{
			timer=setTimeout("toutcacher(true);",2500);	
		}
	}
}
function setForm()
{
	var asuprimer= new Array();
	selects = document.getElementsByTagName('select');
	while(selects[0])
	{
		obj=selects[0];
		
		newselect=document.createElement("div");
		//obj.parentNode.appendChild(newselect);
		
		newinput = document.createElement("input");
		newinput.setAttribute('type','hidden');
		newinput.setAttribute('id',obj.id);
		newinput.setAttribute('name',obj.name);
		newselect.appendChild(newinput);
		
		newdiv = document.createElement("div");
		newdiv.setAttribute('class','blockliste');
		newdiv.setAttribute('className','blockliste');
		newselect.appendChild(newdiv);
		
		newp = document.createElement("p");
		newp.onclick=function() {clearTimeout(timer);montrerliste(this);};
		newdiv.appendChild(newp);
		
		newliste=document.createElement("div");
		newliste.setAttribute('class','liste');
		newliste.setAttribute('className','liste');
		newliste.onmouseover=function(){surliste=true;}
		newliste.onmouseout=function(){surliste=false;timer=setTimeout("toutcacher(true)",1000);}
		newdiv.appendChild(newliste);
		
		options=document.getElementById(obj.id).getElementsByTagName('option');
		for(j=0;j<options.length;j++)
		{
			if(j==0)
			{
				if(obj.title!='')
				{
					newp.innerHTML=fleche+obj.title;
				}
				else
				{
					newp.innerHTML=fleche+options[j].innerHTML;
				}	
			}
			newa = document.createElement("a");
			newa.setAttribute('href','javascript:void(0)');
			newa.setAttribute('id',obj.id+j);
			eval("newa.onclick=function(){validerliste('"+options[j].value+"', this.id,'"+obj.id+"');}");
			newa.onmouseover=function(){surliste=true;}
			newa.innerHTML=options[j].innerHTML+'<br>';
			newliste.appendChild(newa);
		}
		obj.parentNode.replaceChild(newselect,obj);
	}
}
var surliste=false;
window.onload = function() {
  setForm();
}
</script>
</head>
<body>
<span id="test">AVANT</span>:<br>
	<select id="something" name="something" title="1">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
		<option value="4">This is option 4</option>
		<option value="5">This is option 5</option>
	</select>
	<select id="somethingelse" name="somethingelse" title="2">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
	</select>
<div style="position:absolute;right:0px;top:0px;">
	<select id="somethingdone" name="somethingdone">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
	</select>
</div>
<br>APRES:<br>
</body>
</html>

xavierm02

11 janvier 2009 à 20:03:31

12 janvier 2009 à 20:01:43

PS:pour nod_ : je sais tu veut me trucider... je sais eval c'est mal.. je sais tu as fait un post dessus il n'y a pas longtemps... mais je changerais ça quand mon code marchera!

Golmote

12 janvier 2009 à 20:31:05

J'ai juste regarder ton dernier code.

Le problème vient du fait que tu supprimes le select quand tu es encore dans la boucle (qui va de 0 à selects.length)
Et quand tu le supprimes, selects.length se modifie.

Donc au départ, tu vas de 0 à 3. Puis tu incrémentes i et tu supprimes un select, donc tu vas de 1 à 2. etc.

Tu pourrais faire ça :

selects = document.getElementsByTagName('select');
	while(selects[0])
	{
		obj=selects[0];
    // ... ... ...
                obj.parentNode.replaceChild(newselect,obj);
        }

12 janvier 2009 à 21:05:08

Anonyme

12 janvier 2009 à 21:14:22

timer = setTimeout(function () {toutcacher(true);},2500);

newa.onclick = (function () {
    return function () {
        validerliste(options[j].value, this.id, obj.id);
    };
})();

Peut être un problème avec le this, il faut que tu voies.

newa.setAttribute('href','javascript:void(0)');

Non… juste non. Il te faut un boutton, ou un autre élement à la con, pas un lien.

[DOM]un bug avec insertbefore

[DOM]un bug avec insertbefore

Supprimer

Modérer

Signaler le message aux modérateurs