[syntaxe] Ajouter option dans une liste

**achos** · 26/02/2007, 12h02

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

index.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**heyax** · 26/02/2007, 12h13

Je viens de tester ton code sous IE et ça marche !!!
Le probleme est au niveau de q page ? index/ajout ?

**achos** · 26/02/2007, 12h31

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.

**Matthieu2000** · 26/02/2007, 12h41

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

**ryan** · 26/02/2007, 12h45

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.

**SpaceFrog** · 26/02/2007, 13h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**achos** · 26/02/2007, 16h57

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.

**Auteur** · 26/02/2007, 21h01

Euh Achos, si tu pouvais éviter le mulitpost

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

**achos** · 27/02/2007, 11h53

Merci bien,
je suiverai bien ton conseil à propos du multipostage, désolé

Et Merci encore pour l'aide

**Auteur** · 27/02/2007, 11h56

dis moi quand même si la solution que je t'ai apportée te satisfait

**achos** · 27/02/2007, 12h35

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.

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

index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**SpaceFrog** · 27/02/2007, 13h58

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

**achos** · 27/02/2007, 16h37

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

**Auteur** · 27/02/2007, 16h43

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

Les syntaxes du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.maForme.monElement

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.forms["f_ajout"].ville.

que je trouve un peu longues, me donnent parfois mal au crâne

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

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

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

**achos** · 27/02/2007, 17h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Auteur** · 27/02/2007, 17h24

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 :

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

**achos** · 27/02/2007, 18h02

Non j'ai aucun message.
Est ce que vous avez téster mon script ? avez vous des messages de ce genre avec mon script ?

**E.Bzz** · 27/02/2007, 18h04

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

A+

**Auteur** · 27/02/2007, 19h28

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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pour être précis, j'ai planté 5 fois avec cette version du script

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
  liste.options.add(elOption, 0);

la nouvelle option sera toujours en haut de la liste.

[syntaxe] Ajouter option dans une liste

JavaScript

Discussions similaires

Partager

Partager