BOGUE : Internet Explorer ne parvient pas à définir la propriété de l'objet Sélectionnez innerHTML

Numéro d'article: 276228
Agrandir tout | Réduire tout

Sommaire

Symptômes

Lorsque vous définissez la propriété innerHTML de l'objet à Sélectionner , les modifications ne prendront effet correctement.

Résolution

Si vous devez utiliser innerHTML, une solution de contournement consiste à utiliser un objet Div pour encapsuler l'élément SELECT, puis définissez la propriété innerHTML de l'objet Div . Par exemple :
<html>
<head>
<title>My Example</title>
<script language="Javascript">
var origDivHTML;

function init()
{
   origDivHTML = myDiv.innerHTML;
}

function setValues() 
{
   var oldinnerHTML = "your original innerHTML: " + yourDiv.innerHTML ; 	
   alert(oldinnerHTML);
   yourDiv.innerHTML = origDivHTML;
	 
   var curinnerHTML = "your current innerHTML: " + yourDiv.innerHTML ; 
   alert(curinnerHTML); 
}
</script>
</head>

<body onload="init()">

<div id="myDiv">
  <select name="firstSelect" size="1" >
    <option>11111</option>
    <option>22222</option>
    <option>33333</option>
  </select>
</div>

<div id="yourDiv">
  <select name="secondSelect" size="1" >
    <option>aaaa</option>
    <option>bbbb</option>
    <option>cccc</option>
  </select>
</div>
<button onclick = "setValues();">click me to set the values</button>
</body>
</html>
				

Idéalement, vous devez utiliser la collection d'options pour ajouter les options d'un élément SELECT. Le code suivant illustre trois façons d'ajouter par programme les options à l'élément SELECT :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<script>

function fill_select1() {

	for(var i=0; i < 100; i++) {
			select1.options[i] = new Option(i,i);
		}
}

function fill_select2() {

		var sOpts = "<SELECT>";
		for (var i=0;i<100;i++)
		{
			sOpts += '<OPTION VALUE="' + i + '">' + i + '</OPTION>\n';
		}
	
		select2.outerHTML = sOpts  + "</SELECT>";
}

function fill_select3() {

	for(var i=0; i < 100; i++) {
		   var oOption = document.createElement("OPTION");
		   oOption.text="Option:  " + i;
		   oOption.value=i;
		   document.all.select3.add(oOption)
		}
}



</script>

<H2>SELECT Box Population</H2>

<SELECT id=select1 name=select1></SELECT>
<INPUT type="button" value="Populate with options list" id=button1 
name=button1 onclick="fill_select1();"><BR><BR>
<SELECT id=select2 name=select2></SELECT> 
<INPUT type="button" value="Populate with outerHTML" id=button2 
name=button2 onclick="fill_select2();"><BR><BR>
<SELECT id=select3 name=select3></SELECT>
<INPUT type="button" value="Populate with using createElement" id=button3 
name=button3 onclick="fill_select3();">

</BODY>
</HTML>
				

Statut

Microsoft a confirmé qu'il s'agit d'un bogue dans les produits Microsoft répertoriés au début de cet article.

Plus d'informations

Procédure pour reproduire le comportement

L'exemple de code suivant illustre ce bogue :
<html>
<head>
<script language="JavaScript">  
function test()
{
    var objSelect = document.all.idSelect;
    var strOrigHTML     = objSelect.innerHTML;
    objSelect.innerHTML = strOrigHTML;
    var strNewHTML      = objSelect.innerHTML;

    if (strNewHTML == strOrigHTML)
        alert("Test passed.");
    else
        alert("Test failed: innerHTML = " + strNewHTML );
}
</script>
</head>
<body>
  <select id="idSelect">
    <option value="line1">Option 1</option>
    <option value="line2">Option 2</option>
  </select>
  <input type="button" value="test" onClick="test()" />
</body>
</html>
				

Références

Pour plus d'informations sur la sélection d'un objet, consultez l'article suivant sur le réseau MSDN (Microsoft Developer) :
Select-Object
Pour plus d'informations sur la collection d'options , consultez l'article suivant sur MSDN :
Collection d'options

Propriétés

Numéro d'article: 276228 - Dernière mise à jour: jeudi 17 mai 2012 - Version: 2.0
Mots-clés : 
kbbug kbdhtml kbnofix kbmt KB276228 KbMtfr
Traduction automatique
IMPORTANT : Cet article est issu du système de traduction automatique mis au point par Microsoft (http://support.microsoft.com/gp/mtdetails). Un certain nombre d?articles obtenus par traduction automatique sont en effet mis à votre disposition en complément des articles traduits en langue française par des traducteurs professionnels. Cela vous permet d?avoir accès, dans votre propre langue, à l?ensemble des articles de la base de connaissances rédigés originellement en langue anglaise. Les articles traduits automatiquement ne sont pas toujours parfaits et peuvent comporter des erreurs de vocabulaire, de syntaxe ou de grammaire (probablement semblables aux erreurs que ferait une personne étrangère s?exprimant dans votre langue !). Néanmoins, mis à part ces imperfections, ces articles devraient suffire à vous orienter et à vous aider à résoudre votre problème. Microsoft s?efforce aussi continuellement de faire évoluer son système de traduction automatique.
La version anglaise de cet article est la suivante: 276228
L'INFORMATION CONTENUE DANS CE DOCUMENT EST FOURNIE PAR MICROSOFT SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE. L'UTILISATEUR ASSUME LE RISQUE DE L'UTILISATION DU CONTENU DE CE DOCUMENT. CE DOCUMENT NE PEUT ETRE REVENDU OU CEDE EN ECHANGE D'UN QUELCONQUE PROFIT.
Exclusion de responsabilité concernant les contenus obsolètes dans la Base de connaissances
Cet article concerne des produits pour lesquels Microsoft n'offre plus de support. Il est par conséquent fourni « en l'état » et ne sera plus mis à jour.

Envoyer des commentaires