Partage

DOM et ie (aie aie aie!!!)

pour des div select-like

Sujet résolu

30 décembre 2008 à 19:04:24

bon bah voila le code :
j'ai mis des commentaires la ou j'ai un problème(tous mes problèmes sont dans la fonction setForm())(je grossi parce que apparement c'était pas assez visible pour que certains le lisent... :-°

Ancienne version

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:3px solid blue;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
}
 
.liste a{
	border:1px solid blue;
	display:block;
	cursor:default;
	color:#000;
	text-decoration:none;
	background:#fff;
}
 
.liste a:hover{
	color:white;
	background-color:blue;
}
.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, obj, idhidden)
{
	document.getElementById(idhidden).value = txt;
	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()
{
	selects = document.getElementsByTagName('select');
	for(i=0; i<selects.length; i++)
	{
		obj=selects[i];
		newinput = document.createElement("input");
		obj.parentNode.appendChild(newinput);
		//newinput.setAttribute('type','hidden');   la je comprend aps pourquoi ie le veut pas...
		newinput.outerHTML='<input type="hidden" />'; //donc je met ca... même si c'est plus moche...
		newinput.setAttribute('id',obj.id);
		newinput.setAttribute('name',obj.name);
		
		newdiv = document.createElement("div");
		obj.parentNode.appendChild(newdiv);
		newdiv.setAttribute('class','blockliste');
		newdiv.setAttribute('className','blockliste');
		
		newp = document.createElement("p");
		newdiv.appendChild(newp);
		newp.onclick=function() {clearTimeout(timer);montrerliste(this);};
		
		newliste=document.createElement("div");
		newdiv.appendChild(newliste);
		newliste.setAttribute('class','liste');
		newliste.setAttribute('className','liste');
		newliste.onmouseover=function(){surliste=true;}
		newliste.onmouseout=function(){surliste=false;timer=setTimeout("toutcacher(true)",1000);}
		
		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");
			newliste.appendChild(newa);
			newa.setAttribute('href','javascript:void(0)');
			newa.onclick=function(){alert('aze');}//validerliste(options[j].value, this,obj.id)   la je galere... a la palce de laert il faudrait mettre validerliste... mais je n'arrive pas a passer les arguments... vuq ue tout est variable ca merde :s
			
			newa.onmouseover=function(){surliste=true;}
			newa.innerHTML=options[j].innerHTML+'<br>';
		}
//la je sais pas comment y enlever proprement sur ie aussi...
	obj.removeAttribute('name');
	obj.removeAttribute('id');
	obj.setAttribute('class','aenlever');
	obj.innerHTML='';
	}
	/*aenlever=document.getElementsByClassName('aenlever');
	nbaenlever=aenlever.length;
	for(k=0;k<nbaenlever;k++)
	{
		truk=aenlever[0].parentNode;
		disparu = truk.removeChild(aenlever[0]);
	}*/
alert(document.body.innerHTML);
}
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>
		<select id="somethingdone" name="somethingdone">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
	</select>
<br>APRES:<br>
</body>
</html>

Ancienne version(avec eval() qui permet de bypasser un problème)

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:3px solid blue;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
}
 
.liste a{
	border:1px solid blue;
	display:block;
	cursor:default;
	color:#000;
	text-decoration:none;
	background:#fff;
}
 
.liste a:hover{
	color:white;
	background-color:blue;
}
.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, obj, idhidden)
{
	document.getElementById(idhidden).value = txt;
	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()
{
	selects = document.getElementsByTagName('select');
	for(i=0; i<selects.length; i++)
	{
		obj=selects[i];
		newinput = document.createElement("input");
		obj.parentNode.appendChild(newinput);
		//newinput.setAttribute('type','hidden');   la je comprend aps pourquoi ie le veut pas...
		newinput.outerHTML='<input type="hidden" />'; //donc je met ca... même si c'est plus moche...
		newinput.setAttribute('id',obj.id);
		newinput.setAttribute('name',obj.name);
		
		newdiv = document.createElement("div");
		obj.parentNode.appendChild(newdiv);
		newdiv.setAttribute('class','blockliste');
		newdiv.setAttribute('className','blockliste');
		
		newp = document.createElement("p");
		newdiv.appendChild(newp);
		newp.onclick=function() {clearTimeout(timer);montrerliste(this);};
		
		newliste=document.createElement("div");
		newdiv.appendChild(newliste);
		newliste.setAttribute('class','liste');
		newliste.setAttribute('className','liste');
		newliste.onmouseover=function(){surliste=true;}
		newliste.onmouseout=function(){surliste=false;timer=setTimeout("toutcacher(true)",1000);}
		
		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");
			newliste.appendChild(newa);
			newa.setAttribute('href','javascript:void(0)');
			eval("newa.onclick=function(){validerliste('"+options[j].value+"', this,'"+obj.id+"');}");
			
			newa.onmouseover=function(){surliste=true;}
			newa.innerHTML=options[j].innerHTML+'<br>';
		}
//la je sais pas comment y enlever proprement sur ie aussi...
	obj.removeAttribute('name');
	obj.removeAttribute('id');
	obj.setAttribute('class','aenlever');
	obj.innerHTML='';
	}
	/*aenlever=document.getElementsByClassName('aenlever');
	nbaenlever=aenlever.length;
	for(k=0;k<nbaenlever;k++)
	{
		truk=aenlever[0].parentNode;
		disparu = truk.removeChild(aenlever[0]);
	}*/
alert(document.body.innerHTML);
}
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>
		<select id="somethingdone" name="somethingdone">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
	</select>
<br>APRES:<br>
</body>
</html>

Ancienne version qui marche!!!
mais il y a certains points ou je ne comprend pas pourquoi les autres méthodes ne focntionnent pas... (j'ai laissé des commentaires a ces endroits là dans la focntion setForm() )

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:3px solid blue;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
}
 
.liste a{
	border:1px solid blue;
	display:block;
	cursor:default;
	color:#000;
	text-decoration:none;
	background:#fff;
}
 
.liste a:hover{
	color:white;
	background-color:blue;
}
.aenlever
{
display:none;
}
.inputhidden
{
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");
		obj.parentNode.appendChild(newinput);
		newinput.setAttribute('class','inputhidden');//la je mettrais bien un type:hidden comme attribut... mais le setattribut ne marche pas avec ie.. et le outerHTML non plus...
		newinput.setAttribute('className','inputhidden');
		newinput.setAttribute('id',obj.id);
		newinput.setAttribute('name',obj.name);
		
		newdiv = document.createElement("div");
		obj.parentNode.appendChild(newdiv);
		newdiv.setAttribute('class','blockliste');
		newdiv.setAttribute('className','blockliste');
		
		newp = document.createElement("p");
		newdiv.appendChild(newp);
		newp.onclick=function() {clearTimeout(timer);montrerliste(this);};
		
		newliste=document.createElement("div");
		newdiv.appendChild(newliste);
		newliste.setAttribute('class','liste');
		newliste.setAttribute('className','liste');
		newliste.onmouseover=function(){surliste=true;}
		newliste.onmouseout=function(){surliste=false;timer=setTimeout("toutcacher(true)",1000);}
		
		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");
			newliste.appendChild(newa);
			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>';
		}
	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]);
	}
alert(document.body.innerHTML);
}
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>

Nouvelle version presque bien (les remove child je comprend pas pourquoi mais quand je passe pas par une boucle, ça merde...)

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:3px solid blue;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
}
 
.liste a{
	border:1px solid blue;
	display:block;
	cursor:default;
	color:#000;
	text-decoration:none;
	background:#fff;
}
 
.liste a:hover{
	color:white;
	background-color:blue;
}
.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>

Anonyme

30 décembre 2008 à 20:12:24

essaye d'ajouter l'enfant (append) après avoir fixer les attributs, à tous hasard... Sinon je vois pas trop

xavierm02

31 décembre 2008 à 17:20:55

bon bah up...
j'attends toujours une réponse

Golmote

31 décembre 2008 à 17:48:42

T'as essayé la soluce de Geoffroy ?

Je me souviens avoir déjà eu ce type de problèmes... et je crois que la solution était à peu près aussi... étrange.
Donc pour la première erreur, essaie de faire le appendChild seulement une fois que tu as fixé les attributs.

Nesk

31 décembre 2008 à 18:17:59

Citation : Golmote

T'as essayé la soluce de Geoffroy ?

Je me souviens avoir déjà eu ce type de problèmes... et je crois que la solution était à peu près aussi... étrange.
Donc pour la première erreur, essaie de faire le appendChild seulement une fois que tu as fixé les attributs.

Oui, essaye ça ! J'ai déjà eu des problèmes avec ça, maintenant je définis constamment les attributs avant de faire un appendChild() et ça marche tout le temps (il arrive notamment que Safari bloque sur ce problème).

Anonyme

31 décembre 2008 à 18:20:57

haha, dites bonjour aux closures.

Sinon, il va changer ton formulaire? je veux dire, tu vas rien ajouter comme champ en plus par ajax ou je sais pas quoi qu'il n'y a pas dans le script?

(edit) ha oui, pour le type="hidden". C'est impossible de changer le type d'un input en javascript. Marche pas sous IE, marche pas sous FF (heureusement, changer un password en text… spa top)

(edit²) et outerHTML c'est propriétaire. FF connait pas.

xavierm02

31 décembre 2008 à 18:34:29

Citation : nod_

haha, dites bonjour aux closures.
Sinon, il va changer ton formulaire? je veux dire, tu vas rien ajouter comme champ en plus par ajax ou je sais pas quoi qu'il n'y a pas dans le script?

ah euh

c'est a dire que déja pour faire ca je galère... alors si j'éssaye de passer par AJAX, ca va être completement foireux... peut etre plus tard... la pour l'isntant AJAX je gere pas du tout (j'arrive même pas a recharger une div su mno site :s)
la je vais simplifier la focntion qui récupère les éléments ayant une certaine class ... parce que ya pas besoin de tout ca pour ce script... après je fait le css (je vais chercher un bleu moin moche...) et après je verrais... mais le problème, c'est qu'il faudrait mettre le nom de la page sur lequel ca pointe etc. dans le option... la pour le text a afficher je suis passé par le title... mais pour le nom de la page, je voit pas trop ou le mettre... histoire que ca gene pas quand le javascript est pas activé (parce que la mno script rend juste plus joli pour ceux qui l'activent... mais ca marche quand même pour les autres!)

Citation : nod_

(edit) ha oui, pour le type="hidden". C'est impossible de changer le type d'un input en javascript. Marche pas sous IE, marche pas sous FF (heureusement, changer un password en text… spa top)

si ca marche... apparement c'était a cause du apendchild...
le grand Nod_ se setrait trompé?
(enfin ce que tu dit n'est pas totalement faux puisque une fois le append child fait, (donc quand l'utilisateur peut aveoir accès au input), il est impossible de changer le type(d'ou mon problème d'ailleurs))

si vous avez d'autre suggestions, je suis rppeneur... genre le css si quelqu'un connait des couleur qui font un peu plus jol... un peu moins moche....

Nesk

31 décembre 2008 à 18:39:04

Citation : nod_

(edit) ha oui, pour le type="hidden". C'est impossible de changer le type d'un input en javascript. Marche pas sous IE, marche pas sous FF (heureusement, changer un password en text… spa top)

Heureusement oui... j'imagine bien un code malicieux qui entre le chemin d'un fichier dans un text puis modifie le type en file et envoi le tout :-°

Anonyme

31 décembre 2008 à 18:41:38

Citation : xavierm02

le grand Nod_ se setrait trompé?
(enfin ce que tu dit n'est pas totalement faux puisque une fois le append child fait, (donc quand l'utilisateur peut aveoir accès au input), il est impossible de changer le type(d'ou mon problème d'ailleurs))

On est bien d'accord. 'videment que tu peux le changer avant, y'a pas de type pas défaut quand tu fait un createElement();

j'ai besoin de me détendre un peu, je te fais un truc.

xavierm02

31 décembre 2008 à 18:43:20

au fait BONNE ANNEE!
(mon up va-t-il passer innapercu ??? :euh:

)
et j'ai toujours pas compris pourquoi je doit passer par une boucle pour les removvechild... et pk

obj.parentNode.removechild(obj);

ca amrche pas :s

éclaire moi de tes connaissances infinies ô grand nod_ stp

Nesk

31 décembre 2008 à 18:45:55

Tiens, marrant, je viens de tester un truc : j'ai créé un input password, j'écris dedans puis je le modifie en text, ben ça marche impeccablement o_O

(sous FF) ! Par contre ça marche pas avec les input file

xavierm02

31 décembre 2008 à 18:48:00

ui... c'est pour ca que ca marchait sous firefox et pas ie mon script...

pour une fois ie a raison et firefox tor...
c'est le monde a l'envers... o_O

Anonyme

31 décembre 2008 à 20:08:15

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:3px solid blue;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
	margin:0;
	padding:0;
	list-style:none;
}
</style>
</head>
<body>
    <form>
	<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>
		<select id="somethingdone" name="somethingdone">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
	</select>
	</form>
	
<script>
(function () {
// c'est pour le blaireau d'IE
if (!Array.prototype.forEach)
{
  Array.prototype.forEach = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError(); 

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
        fun.call(thisp, this[i], i, this);
    }
  };
}

// on cache la misère
function Casimir (el) {
    var parent = el.parentNode,
        options = Array.prototype.slice.apply(el.getElementsByTagName("option")),
        text = "Select",
        liste = document.createElement("ul"),
        input = document.createElement("input"),
        boite = document.createElement("div"),
        legend = document.createElement("span");
    
    // on fait tout les bidules
    input.type = "hidden"; 
    input.name = el.name;
    input.id = el.id;
    liste.className = "liste";
    
    
    // on click
    boite.onmousedown = function (e) {
        liste.style.display = "block";
        // un peu de cosmétique pour la largeur de la liste
        if (liste.offsetWidth <= legend.offsetWidth) {
            liste.style.width = legend.offsetWidth+"px";
        }
    };
    liste.onmousedown = function (e) {
        liste.style.display = "none";
        e.cancelBubble = true;
    };
    
    // transforme les option en truc cools
    // et on les rajoute à "liste"
    options.forEach(option);
    legend.innerHTML = text;
    
    // uniquement à la fin qu'on remplace et ajoute, plus rapide
    boite.appendChild(legend);
    boite.appendChild(input);
    boite.appendChild(liste);
    // remplace le select
    parent.replaceChild(boite, el);
    
    function option (opt) {
        var li = document.createElement("li");
        li.title = opt.value;
        li.innerHTML = opt.innerHTML;
        li.onmousedown = function () {
            input.value = this.title; // met a jour l'input
            legend.innerHTML = this.innerHTML;
            // laisse bubbler l'évènement
        };
        liste.appendChild(li);
    }
};


window.onload = function () {
    var selects = Array.prototype.slice.apply(document.getElementsByTagName("select"));
    // wééé on a un "vrai" Array
    selects.forEach(Casimir);
};


})();
</script>
</body>
</html>

Bon je peux pas vraiment tester sous IE, je vais juste prier que ça marche.

xavierm02

1 janvier 2009 à 9:38:17

ça fait la même chose que le mien... sauf que le tien est carrément incompréhensible... du moins pour moi...

et que quand on met la sourie sur un élément de la liste, ça ne met pas le background-color

PS: ça marche pas sous ie

Anonyme

1 janvier 2009 à 12:40:37

Sauf qu'il est genre 2 fois plus court et ne rajoute pas de variable globale.
Pour l'histoire du background c'est a rajouter dans le onmouseover du li

T'as tester avec IE8?

faut pas avoir peur du Array.prototype.forEach, ça viens de là : https://developer.mozilla.org/fr/R%c3% [...] Array/forEach

xavierm02

1 janvier 2009 à 13:36:26

pourquoi tu met un onmouseover alors qu'on peut y faire en css?

Anonyme

1 janvier 2009 à 13:48:18

ouais aussi, mais IE gère pas le hover sur les "li", mais bon, si ça marche déja pas sous ie…