Supprimer liste déroulante.

Résolu/Fermé
Merwane78 - 26 sept. 2008 à 12:15
 Merwane78 - 26 sept. 2008 à 15:38
Salut


J'ai réussi à trouver un code qui me permet d'ajouter dynamiquement un champs texte. Le code marche très bien avec 2 input mais dès que je remplace un input par un select la fonction de suppression ne marche plus.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>

<script type="text/javascript">

var c,c2, ch1, ch2;

// ajouter un champ avec son "name" propre;
function plus(){
c=document.getElementById('cadre'); c2=c.getElementsByTagName('input');
ch1=document.createElement('input');
ch2=document.createElement('input');

ch1.setAttribute('type','text');
ch1.setAttribute('name','ch1'+c2.length);
ch1.setAttribute('readonly','readonly');
ch1.setAttribute('value', 'etiquette'+c2.length/2);
ch1.setAttribute('style','border:none');

ch2.setAttribute('type','text');
ch2.setAttribute('name','ch2'+c2.length);
c.appendChild(ch1);
c.appendChild(ch2);

document.getElementById('sup').style.display='inline';
}

// supprimer le dernier champ;
function moins(){
if(c2.length>0){
c.removeChild(c2[c2.length-1]);
c.removeChild(c2[c2.length-1]);
}
if(c2.length==0){document.getElementById('sup').style.display='none'};
}

</script>
</head>
<body>
<form id="frm" action="">
<div id="cadre" style="margin-left:100px;width:200px">
</div>

<p>
<input type="button" value="ajouter un champ" onclick="plus()" />
<input type="button" style="display:none" id="sup" value="supprimer un champ" onclick="moins()" />
</p>
</form>


</body>
</html>



Dès que je clic sur "supprimer un champ", le script ne supprime que l'input et laisse la liste déroulante...


Auriez vous une idée ?


Merci
A voir également:

4 réponses

Salut effectivement c'était ca. Merci

Ca ne marche pas sur IE7 mais bien sur firefox.

Internet explorer me retourne une erreur du type "Argument non valide" à la ligne 34 (ch2.options.add(oOption);)





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>

<?php


function mysql_to_js()
{
mysql_connect("localhost", "root", "");
mysql_select_db("projet2");
// Requête mysql
$req = mysql_query("SELECT CONCAT(nom,' ',prenom) as nom FROM utilisateurs order by nom");
$taille = mysql_num_rows($req);

$nomtabjs = "tableau";
$numfields = mysql_num_fields($req);
if($numfields > 0)
{
echo("<script type=\"text/javascript\">");

echo("var taillejs =".$taille.";" );
echo("var ".$nomtabjs." = new Array(".$numfields.");\n");

for($i=0; $i<$numfields; $i++)
{
echo($nomtabjs."['".mysql_field_name($req, $i)."'] = new Array(".$taille.");\n");
}

}

if($taille>0)
{
// Déclaration du reste des valeurs du résultat de la requête.
$i=0;
while($data = mysql_fetch_assoc($req))
{
foreach($data as $key => $value)
{
echo($nomtabjs."['".mysql_escape_string($key)."'][".$i."] = '".mysql_escape_string($value)."';\n");

}

$i++;
}

}

else
{
echo("var ".$nomtabjs." = null;\n");
}

}

mysql_to_js();

?>

var c,c2, ch1, ch2;

// ajouter un champ avec son "name" propre;
function plus(){
c=document.getElementById('cadre'); c2=c.getElementsByTagName('select');

ch2=document.createElement('select');


for (z = 0 ; z < taillejs ; z++)
{
var oOption = document.createElement("OPTION");
oOption.value = tableau['nom'][z];
oOption.text = tableau['nom'][z];

ch2.setAttribute('name','ch2'+c2.length);
c.appendChild(oOption);
ch2.options.add(oOption); // ICI
c.appendChild(ch2);
}




document.getElementById('sup').style.display='inline';
}

// supprimer le dernier champ;
function moins(){
if(c2.length>0){
c.removeChild(c2[c2.length-1]);
}
if(c2.length==0){document.getElementById('sup').style.display='none'};
}

</script>


</head>
<body>
<form id="frm" action="">
<div id="cadre" style="margin-left:100px;width:200px">
</div>

<p>
<input type="button" value="Ajouter un destinataire" onclick="plus()" />
<input type="button" style="display:none" id="sup" value="Supprimer le dernier destinataire" onclick="moins()" />
</p>
</form>


</body>
</html>
0
Trouvé c'est bon.

Il fallait remplacer la ligne bizare avec

ch2.options[ch2.options.length] = new Option ('text','value');


Merci.
0
Absinthe06 Messages postés 102 Date d'inscription vendredi 11 juillet 2008 Statut Membre Dernière intervention 7 juillet 2010 11
26 sept. 2008 à 12:58
(EDIT : dsl pour le double post, plantage navigateur ><)

Salut,

c'est tout a fait normal, la liste deroulante est créée a partir de la balise HTML <select>, et non <input> ;)

il faut modifier ton javascript pour qu'il traite les deux balises séparéments.
-1
Absinthe06 Messages postés 102 Date d'inscription vendredi 11 juillet 2008 Statut Membre Dernière intervention 7 juillet 2010 11
26 sept. 2008 à 12:58
--
"Un con qui roule va plus loin qu'un intellectuel assis..."
Absinthe, game designer, graphiste, et webmaster à ses heures perdues...
-2