11548 sujets

JavaScript, DOM et API Web HTML5

Option selected value avec firefox

Bonjour,
utilisant d'habitude IE8 (imposé),
je suis amené à ce que l'application soit compatible Firefox.
dans le code ci-dessus 

			var Nom			= document.getElementById('Champ');
			var NomDetail	= document.getElementById('ChampDetail');
			var Selection	= document.FormeSaisie.Champ;
			var Index		= document.FormeSaisie.Client.selectedIndex;
			var Navigateur = navigator.appName;						// 'Netscape' pour Firefox
			Nom.value		= Selection.options[Index].value;
			alert('Nom:'+Nom.value);
			if (Navigateur == 'Netscape') {							// Ne marche pas pour Firefox
				NomDetail.value	= Selection.options[Index].text;
			} else {												// Du coup, est-ce bien nécessaire sous IE7 ?
				NomDetail.value	= Selection.options[Index].text;
			}

la valeur de Nom est bien reprise quelque soit le navigateur (.value)
mais le script se plante sur la ligne NomDetail.value (.text sous Netscape)
J'ai vu un post avec le même titre mais sans comprendre la solution proposée
Quelqu'un sait-il comment Firefox réagit sur ce .text ?
En effet, la partie a été zappée, merci 


<html>
<head>
	<script type="text/javascript">
	function ChangerClient () {
	var Nom            = document.getElementById('Client');
	var NomDetail    = document.getElementById('Libelle'); 
	var Selection    = document.FormeSaisie.Client; 
	var Index        = document.FormeSaisie.Client.selectedIndex; 
	var Navigateur = navigator.appName;
	Nom.value        = Selection.options[Index].value; 
	alert('Nom:'+Nom.value); 
	if (Navigateur == 'Netscape') {
	  NomDetail.value    = Selection.options[Index].innerHTML; 
	} else {
	  NomDetail.value    = Selection.options[Index].text; 
	} 
	alert('NomDetail:'+NomDetail.value);
	}
	</script>
</head>
<body>
<form name="FormeSaisie">
	<select name='Client' id='Client' onChange="ChangerClient()">
	<option value='1'>Gilbert</option>
	<option value='2'>Gaston</option>
	<option value='3'>Richard</option>
	</select>
	<input type="text" id="Libelle"/>
</form>
</body>
</html>
Je ne situe pas très bien votre problème, car je ne vois rien d'anormal, ni sous IE8, ni sous Firefox.
Cependant, vous pouvez déjà ajouter juste avant l'option value="1", ceci : 
<option selected="selected">Choix</option>
, car sinon le choix de la première option ne fonctionne pas.
D'autre part, il serait préférable d'utiliser "document.getElementById" pour désigner les éléments et d'abandonner l'attribut "name" Smiley cligne
Le problème se situe dans la fonction Javascript , vue avec Fireburg.
La partie html a été reconstituée (elle est fabriquée par du PHP)
et j'ai omis le selected mais il existe
en fait, c'est sur la ligne ci-dessous qu'il y a problème
NomDetail.value = Selection.options[Index].text;
le test
NomDetail.value = Selection.options[Index].InnerHTML;
ne donne pas grand chose ....
Quand je fais ceci, je ne vois d'erreur nulle part, ni dans IE8, ni dans FF :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>
      selection
    </title>
    <script type="text/javascript">
//<![CDATA[
        function ChangerClient () {
        var Nom = document.getElementById('Client');
        var NomDetail = document.getElementById('Libelle'); 
        var Selection = document.FormeSaisie.Client; 
        var Index = document.FormeSaisie.Client.selectedIndex; 
        var Navigateur = navigator.appName;
        Nom.value = Selection.options[Index].value; 
        alert('Nom:'+Nom.value); 
        
        if (Navigateur == 'Netscape') {
          NomDetail.value = Selection.options[Index].innerHTML; 
        } else {
          NomDetail.value = Selection.options[Index].text; 
        } 
        alert('NomDetail:'+NomDetail.value);
        }
    //]]>
    </script>
  </head>
  <body>
    <form name="FormeSaisie" action="#" id="FormeSaisie">
      <select name='Client' id='Client' onchange="ChangerClient()">
        <option selected="selected">
          Choix
        </option>
        <option value='1'>
          Gilbert
        </option>
        <option value='2'>
          Gaston
        </option>
        <option value='3'>
          Richard
        </option>
      </select> <input type="text" id="Libelle" />
    </form>
  </body>
</html>

Modifié par lddsoft (19 Mar 2011 - 19:55)
Sujet clos
Aller à