[syntaxe] Ajouter option dans une liste

Version imprimable

Bonjour tout le monde,
j'ai 2 pages HTML suivante :

index.html :
Code:

1 2 3 4 5 6 7 8 9 <form name="monform"> <select name="choix" id="choix"> <option value="rabat">rabat</option> <option value="paris">paris</option> <option value="berlin">berlin</option> </select> <input type="button" value="new" onClick="window.open('ajout.html','ajouter_ville','width=200,height=200')"> </form>
ajout.html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script language="javascript"> function refreshPage(newValue){ var w = window.opener.document.getElementById('choix'); var content = w.innerHTML; content += '<option value="' + newValue + '">' + newValue + '</option>'; w.innerHTML = content; } </script> <form name="form"> ville <input type="text" name="ville" onBlur="refreshPage(this.value)"> <input type="button" value="ok" onClick="self.close();"> </form>
mon probl�me est que sous internet explorer la liste n'est pas affich�e, elle est toute vide.
j'ai tester le m�me script sous Mozilla Firefox et Opera et il fonctionne bien.
pourquoi �a ne marche pas avec IE ? est ce qu'il y'a un autre moyen pour le faire fonctionner correctemet avec IE.

Merci d'avance

26/02/2007, 12h13
heyax

Je viens de tester ton code sous IE et �a marche !!!
Le probleme est au niveau de q page ? index/ajout ?
26/02/2007, 12h31
achos

Lorsque tu ajoute une nouvelle ville dans la page "ajout", elle apparait dans la liste des ville de la page "index" .
Car c'est ca mon probl�me avec IE. la liste apparait vide m�me les villes d�j� existantes dans la liste ont disparu.
26/02/2007, 12h41
Matthieu2000

http://www.developpez.net/forums/sho...=option+m%E8re
26/02/2007, 12h45
ryan

Yop!

Manipuler l'innerHTML n'est pas la seule solution possible, il existe des alternatives pour ajouter des options dans un SELECT.

Soit cr�er une instance avec new option(texte,valeur), soit ajouter un noeud.

Peut-�tre auras-tu moins de pb avec l'une ou l'autre de ces fa�ons.

Curieusement on peut aussi se passer de la creation de Noeud ou de l'ajout d'une option, il suffit de modifier la longueur de la collection d'options de la liste:
Code:

1 2 3 4 5 6 7 8 9 <select id='test'> </select> <script type='text/javascript'> var myselect = document.getElementById('test') myselect.options.length=10 for(i=0;i<myselect.length;i++){ myselect.options[i].innerHTML="option " +i } </script>
Fonctionne sous IE et FFX ...

26/02/2007, 16h57
achos

Citation:

Envoy� par Matthieu2000

http://www.developpez.net/forums/sho...=option+m%E8re

Merci bien pour ce lien, j'ai trouv� la solution a mon probl�me.
mais j'arrive pas � savoir pourquoi mon script n'a pas fonctionn� avec IE tandis qu'il fonctionne bien avec FF te Opera.

Merci une deuxi�me fois pour vous tous.

:king:
26/02/2007, 21h01
Auteur

Euh Achos, si tu pouvais �viter le mulitpost :aie: :roll:

http://www.developpez.net/forums/sho...d.php?t=285048
Je t'y donne une r�ponse qui fonctionne sous IE et firefox

:merci:
27/02/2007, 11h53
achos

Merci bien,
je suiverai bien ton conseil � propos du multipostage, d�sol� :oops:

Et Merci encore pour l'aide :king:
27/02/2007, 11h56
Auteur

dis moi quand m�me si la solution que je t'ai apport�e te satisfait ;)

Biensure le r�sultat est largement suffisant.
Merci infiniment, et aussi pour le lien que vous m'avez donn� sur la transmission des donn�es entre les feuilles M�re et fille.
:king:

j'ai m�me trouver une autre m�thode pour r�aliser ce script la voil� :

index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<form name="f_ajout">
<label> Ville : 
	<select name="ville">
		<option value="rabat">rabat</option>
		<option value="rabat">paris</option>
		<option value="rabat">rome</option>
	</select>
</label>
<input type=button value="new" onClick="window.open('popup.html','ajouter_ville','width=200,height=200,top=200,left=300').focus();"><br>
</form>

popup.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<html>
<head>
<title>Ajouter une ville</title>
<script language="javascript">
	function Valider(form){
		var bval = true;
 
			if (form.champ.value=="" && bval){
				alert('Veuillez saisir la ville');
				bval = false;
				form.champ.focus();
			}
 
			if (bval){
 
				var nouvelleOption = window.opener.document.createElement("option");
				  nouvelleOption.value = form.elements['champ'].value;
				  nouvelleOption.appendChild(window.opener.document.createTextNode(form.champ.value));
				  window.opener.document.forms["f_ajout"].ville.appendChild(nouvelleOption);
				} 
 
		return bval
	}
</script>
</head>
 
<body onLoad="document.f1.champ.focus();">
<form name="f1" onSubmit="return Valider(this);">
<h4>Ajouter une ville</h4>
<input type="text" name="champ">
<input type="submit" value="Enregistrer" onClick="self.close();">
</form>
</body>
</html>

qu'est ce que vous pensez ?

27/02/2007, 13h58
SpaceFrog

ton self.close() risque de te poser des soucis ...
27/02/2007, 16h37
achos

Bonjour tout le monde,
mon probl�me est r�solu dans un autre forum que j'ai post�, intitul� :
[Syntaxe]Probl�me pour rafraichir une liste avec internet explorer .

Pour ceux qui vont la solution rendez-vous a ce lien:
http://www.developpez.net/forums/sho...d.php?t=285048

Bonne chance
:king:
27/02/2007, 16h43
Auteur

personnellement, j'aime bien acc�der � un �l�ment quel qu'il soit par la m�thode getElementById()

Les syntaxes du type :

Code:

document.maForme.monElement

ou

Code:

document.forms["f_ajout"].ville.

que je trouve un peu longues, me donnent parfois mal au cr�ne :lol:

Avec getElementById, je sais ce quel �l�ment est cibl�.

Citation:

ton self.close() risque de te poser des soucis ...

+1 Ta fen�tre risque de se fermer avant la mise � jour de la liste.

:salut:
Non pas du tout j'ai aucun probl�me.
le traitement s'effectue avant la fermeture de la fen�tre, donc pas de souci.
Voici mon script final :

index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<form name="f_ajout">
<label> Ville : 
<select name="ville">
<option value="choisir" selected="selected">-choisir-</option>
<option value="rabat">rabat</option>
<option value="rabat">paris</option>
<option value="rabat">rome</option>
</select>
</label>
<input type=button value="new" onClick="window.open('popup.html','ajouter_ville','width=200,height=200,top=200,left=300').focus();"><br>
</form>

popup.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<html>
<head>
<title>Ajouter une ville</title>
<script language="javascript">
  function Valider(form){
    var bval = true;
 
      if (form.champ.value=="" && bval){
	alert('Veuillez saisir la ville');
	bval = false;
	form.champ.focus();
         }
 
      if (bval){
 
      var nouvelleOption = window.opener.document.createElement("option");
      nouvelleOption.value = form.elements['champ'].value;
      nouvelleOption.selected = 'selected';
      nouvelleOption.appendChild(window.opener.document.createTextNode(form.champ.value));
  window.opener.document.forms["f_ajout"].ville.appendChild(nouvelleOption);
     } 
 
  return bval
}
</script>
</head>
 
<body onLoad="document.f1.champ.focus();">
<form name="f1" onSubmit="return Valider(this);">
<h4>Ajouter une ville</h4>
<input type="text" name="champ">
<input type="submit" value="Enregistrer" onClick="self.close();">
</form>
</body>
</html>

pour eviter le pb de self.close()
je peut modifier un peut dans la popup comme suite :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
<html>
<head>
<title>Ajouter une ville</title>
<script language="javascript">
  function Valider(form){
     var bval = true;
   if (form.champ.value=="" && bval){
           alert('Veuillez saisir la ville');
	bval = false;
	form.champ.focus();
       }
 
	if (bval){
 
       var nouvelleOption = window.opener.document.createElement("option");
       nouvelleOption.value = form.elements['champ'].value;
       nouvelleOption.selected = 'selected';
       nouvelleOption.appendChild(window.opener.document.createTextNode(form.champ.value));
  window.opener.document.forms["f_ajout"].ville.appendChild(nouvelleOption);
  self.close();
	} 
 
 return bval
	}
</script>
</head>
 
<body onLoad="document.f1.champ.focus();">
<form name="f1">
<h4>Ajouter une ville</h4>
<input type="text" name="champ">
<input type="submit" value="Enregistrer" onClick="return Valider(f1);">
</form>
</body>
</html>

j'ai test� les 2 cas est ca marche tr�s bien.
qu'est ce que vous pensez ?

27/02/2007, 17h24
Auteur

Citation:

Envoy� par achos

j'ai test� les 2 cas est ca marche tr�s bien.
qu'est ce que vous pensez ?

bah, si tu n'as pas ce message :

Citation:

Votre navigateur a caus� une d�faillance dans le module xxx.dll. Votre application va se fermer. Si le probl�me persiste veuillez contacter le fabricant. Cliquez sur "D�tails" pour voir l'�tat de la pile.

il n'y a pas de probl�me :mouarf:
27/02/2007, 18h02
achos

:mouarf: :mouarf:

Non j'ai aucun message.
Est ce que vous avez t�ster mon script ? avez vous des messages de ce genre avec mon script ?
27/02/2007, 18h04
E.Bzz

Comme il est pu l� pour r�pondre, je me permets :
A mon avis, il le dit pas par hasard ;)

A+

J'ai test� ton script je n'ai eu aucun souci (iE5 et Firefox).

Disons qu'avec le script que je t'ai donn� dans l'autre discussion, j'ai eu quelques soucis avec IE :

Citation:

Envoy� par Auteur

Dans un premier temps, j'acc�dais � ta liste (getElementById()) dans une fonction de la pop-up et je la mettais � jour. L'ennui est que cela faisait planter IE.

dans popup.html j'ai fait ceci dans un premier temps :
Code:

1 2 3 4 5 6 7 8 9 10 function ajouterVille() { var ville = document.getElementById("idText").value; var liste = window.opener.document.getElementById("choix"); var elOption = new Option(ville, ville, false, false); //Ajout dans le select de l'option liste.options.add(elOption); }
J'ai eu droit � "une erreur interne" sous IE, avant l'�cran bleu :mrgreen: :aie:
Pour �tre pr�cis, j'ai plant� 5 fois avec cette version du script :bug:

D'o� cette version dans laquelle tu vois dans popup.html :
Code:

1 2 3 4 5 6 7 function ajouterVille() { var ville = document.getElementById("idText").value; //on transmet a la fonction ajouter() de la fenetre mere le nom de la ville window.opener.ajouter(ville); }
et dans index.html
Code:

1 2 3 4 5 6 7 8 9 10 11 function ajouter(ville) { var liste = document.getElementById("choix"); var elOption = new Option(ville, ville, false, false); //Ajout dans le select de l'option liste.options.add(elOption); alert(ville+" a été ajoutée à la liste"); }
CQFD comme on dit :D

Petite parenth�se : la m�thode add peut prendre un second param�tre qui est la position de l'option dans la liste
Code:

1 2 liste.options.add(elOption, 0);
la nouvelle option sera toujours en haut de la liste.