ajouter une autre liste deroulante en appuyant sur un bouton

Bonjour,

En fait, au depart, j'aurais un nombre fixe de listes deroulantes dynamiques (3 paires de liste => cf. schema ci-dessous). Ces listes disposees dans un tableau (pour une meilleure mise en page) permettent une recherche par categorie cad que l'utilisateur selectionne la categorie dans laquelle il recherche son information dans la premiere liste et precise une sous-categorie dans la seconde.
Ca ressemblerais a ca...
               LISTE 1                                       LISTE 2
               LISTE 1                                       LISTE 2
               LISTE 1                                       LISTE 2
Comme vous l'avez remarquer j'ajoute en faite a chaque fois une nouvelle ligne.
J'aimerais savoir comment je pourrais une fois la page chargée par le navigateur, insérer une nouvelle ligne comme celles que vous voyez juste au-dessus, en fin du tableau, en appuyant sur un bouton "AJOUTER"... SANS RECHARGER LA PAGE !! ou alors uniquement en chargant la nouvelle ligne (via AJAX je pense).

La premiere question.... primordiale est donc :
Existe-t-il une fonction qui permette d'ajouter du code dans une page HTML ? et a un endroit precis (pour moi ce serait dans une nouvelle ligne du tableau) ?
J'ai vu que y avait les fonctions document.write() et writeln() mais elles generent carrement une nouvelle page (effacent le code originel).

Deuxieme question :
Est-ce que y aurait moyen de recuperer (recopier) carrement la partie du code HTML qui code justement l'affichage de ces listes (via une fonction JAVAScript par exemple) ?
Sinon il faudra sans doute que j'utilise AJAX pour refaire une demande au server et charger la nouvelle ligne, non?

Merci d'avance pour vos reponses ;)

B onjour...
La première question.... primordiale est donc :
Toute les premières questions sont par définition primordiales.

pour ajouter des éléments dans une page HTML il existe au moins deux méthodes
- la moins élégante consiste à ajouter a la fin du body le texte voulu en faisant
document.innerHTML += 'Texte en plus';

- La plus élégante est d'utiliser les fonctions idoines tel que createElement() ou encore createTextNode()

pour les tableaux il y a insertRow() et insertCell()

Est-ce que y aurait moyen de recuperer (recopier)
OUI en récupérant le innerHTML de l'élément à copier et en l'affectant à l'élément destination
exemple :
var O_Srce = document.getElementById( 'DIV_SRCE');
var O_Dest = document.getElementById( 'DIV_DEST');
var Chaine = O_Srce.innerHTML;
O_Dest.innerHTML = Chaine;

pour bien plus d'informations il y a, entre autres, [ Lien ]

;0)

Bonjour,
 et merci pour ta reponse qui m'a ete bien utile ;)

Cependant, un petit probleme persiste! En effet, maintenant que j'ai recopier la ligne qui m'interressait je voudrais changer le nom attribué au select...

Un petit bout de code sera sans doute plus explicite :

<script type='text/javascript'>
//cette fonction genere une nouvelle liste quand on appuie sur le bouton ajouter.
function genere_nouvelle_liste()
{
 var tableau = document.getElementById("tab"); // "tab" est l'id du tableau en question (de tte facon,y en a qu'un seul dans la page).
 var last_line = tableau.rows.length;
 tableau.insertRow(-1);
 var content = tableau.rows[0].cells[0].cloneNode(true);
 alert(content.innerHTML);      //affiche le code HTML attribué au select plus son contenu (cad <option,etc...)
 alert(content.firstChild.innerHTML);      //n'affiche que le contenu du select (ce qui parait assez normal)
 content.firstChild.setAttribute("name",last_line);       // j'essaye de modifier le nom du select
 content.setAttribute("name",last_line);      // ainsi j'attribue carrement le nom a la balise <TD> !! :S
 alert(content.outerHTML);      // affiche la balise <TD name="(la valeur de la derniere ligne)"> et tout son contenu (select +option)
 
////j'ai egalement essaye comme suit mais une erreur se produit sur la page et aucune liste n'est generee
 //var remplace = '<select name="'+last_line+'" onChange="go('+last_line+');">';
 //content.replaceChild(remplace,content.firstChild);
 //alert(content); //l'alert n'est pas affichee

 tableau.rows[last_line].appendChild(content);   //et c'est la finalement que j'associe le "content" comme "Child" de la derniere ligne
}
</script>

Voila alors j'espere que vous pourrez m'aider parce que ca fait un moment que je bloque la-dessus.
Merci d'avance ;)

Vince

Re PetoleTeam,
et par contre ton truc avec le fait d'affecter le contenu innerHTML de l'un a l'autre...
B ca n'a pas l'air de fonctionner des masses :S c'est peut etre moi qui m'y prends mal...

Merci quand meme,
J'continue de chercher mais j'pense que je vais finir par laisser tomber :(

B onjour...
Je concéde que la première réponse était un peu générale, dans ton cas...
Perso je ferais comme suit...

var Compteur= 0;
//-------------------------
function Create_New_Liste(){
  Compteur ++;
  //-- Recup de l'objet Table
  var O_Table = document.getElementById( 'T_TABLE');
  var NbrLigne = O_Table.rows.length;
  //-- Creation d'une ligne
  var O_Row = O_Table.insertRow( -1);
  //-- Creation de la cellule
  var O_Cell = O_Row.insertCell(-1);
  //-- Recup du Select
  var O_Select = document.getElementById( 'S_LIST');
  //-- Creation d'un clone
  var O_Clone = O_Select.cloneNode(true);
  //-- Changement id et name
  O_Clone.id   = "S_NEW_" +Compteur;
  O_Clone.name = "S_NEW_" +Compteur;
  //-- Ajout dans la cellule
  O_Cell.appendChild( O_Clone);
}

Peu de différence avec ce que tu as essayé...
;0)

Salut Petole Team,
et merci pour ta reponse détaillée...

J'ai ajouter cette ligne de code a la fonction pour m'afficher le contenu de la derniere ligne :
[code] alert(O_Table.rows[NbrLigne].innerHTML); [/code]
Ta fonction affiche bien la nouvelle liste mais malheureusement seul l'id est modifié... le "name" reste identique.
J'ai aussi essayer de modifier l'attribut onchange de mon select, ca fonctionne egalement.

Je commence donc vraiment a douter qu'on puisse modifier l'attribut "name" d'un select...

A l'origine, le name me permet uniquement de recuperer la valeur des differentes select de mon formulaire, dans la nouvelle page appelée, grace à :
[code] $_POST["name_du_select"]; [/code] (method="post" en PHP).

Alors si je pouvais me passer du name et utiliser plutot l'id, ca serait nickel.

Sinon je pense qu'une alternative serait de crée soit meme un nouveau select avec les attributs correspondants et d'y ajouter le meme contenu (les meme options).
J'ai deja essayé mais je n'arrive a attribué qu'un seul attribut au select et je n'arrive pas à attribuer le contenu de l'ancien select(O_Select) au nouveau(O_Clone).

Sinon encore un petite question a part... a quoi font reference tes T_,O_,S_ dans les noms de variable ? :)

Merci encore pour ton aide precieuse PetoleTeam et si quelqu'un d'autre pourrait ns aider il est le bienvenu ! :D
Je sais qu'on ai pas loin du resultat final alors encore un peu de courage s'il vous plait.

J'attends avec impatience vos reponses,
Vince.

Salut bon je pense avoir trouver le probleme!!!
En fait ca marche mais c'est l'alert qui donne de la merde!!
En gros, si tu demande carrement le nom du select par :

alert(O_Clone.name);  ou sinon tu fou dans le select un onchange="alert(this.name);"

il te donne la valeur a jour de "name" alors que si tu utilises comme je l'ai fait :

alert(O_Table.rows[NbrLigne].innerHTML);

alors il t'affiche la valeur originelle de "name"!!!
C'est fou ca !! c quand meme pas un bug de javascript, j'ai loupé un truc!!!!

Bref, je suis bien content de constater qu'en fait le probleme ne venait pas de moi!
Meme si ce qui vient d'arriver est super bizarre a mon gout!!

Ouais bon me revoila encore!
Alors comme je disais, apparemment il modifie bien le nom et tout mais la fonction onchange=go(x); n'est pas appelee!!
J'ai beau modifier la selection du select (, aucune reaction!! Normalement ca devrait repopuler une autre liste situee juste a cote.

Ca veut dire quoi ce bordel ? pourtant la syntaxe est plus que correcte.
Les nouvelles listes créées ne seraient la que pour faire jolie ? :S

Je comprends plus rien.

B onjour...
Essayons de reprendre dans l'ordre...

a quoi font reference tes T_,O_,S_ dans les noms de variable ? :)
c'est juste une façon de nommer les objets manipulés
- O_Table -> Objet Table,  O_Cell - > Objet cellule plutôt que de mettre des nom de variables du type montableaudereference comme l'on voit parfois...
- pour les ID j'ai l'habitude de nommé S_xxx les SELECTs D_xxx les DIVs etc... et en majuscule en plus c'est tout.
Chacun ses petites manies.

alert(O_Table.rows[NbrLigne].innerHTML);
en régle générale on ne travail pas avec le innerHTML pour connaître les propriètés d'un objet mais avec l'objet lui même.

Dans le cas présent j'ai testé l'existence de l'objet AUCUN PROBLEME même si IE, est lui seul, affiche un innerHTML incorrect.
On notera que quoiqu'il arrive IE reconnaît l'objet par son NAME même si le innerHTML est incorrect.
C'est peut être un BUG, mais pas de javascript, qui est sans concéquence si l'on travail avec l'objet lui même.

J'ai beau modifier la selection du select
La je suis surpris les tests réalisés sont tout à fait correct la fonction liée au onchange fait parti du clonage.
Le problème serait-il ailleurs ?

A suivre mon fichier TEST

<html>
<head>
<title>TEST_AJOUTER_983466</title>
<script type='text/javascript'>
var Compteur = 0;
//------------------------
function Write_Info( txt_){
  var Obj = document.getElementById( 'T_INFO');
  var Chaine =   Obj.value;
  Obj.value =  txt_ +'\n' +Obj.value;
}
//----------------------------
function Create_Ligne( where_){
  Compteur ++;
  var O_Table = document.getElementById( where_);
  var NbrLigne = O_Table.rows.length;
  //-- Creation d'une ligne
  var O_Row  = O_Table.insertRow( -1);
  //-- Creation de la cellule
  var O_Cell = O_Row.insertCell(-1);
  //-- Recup du Select
  var O_Select = document.getElementById( 'S_LIST');
  //-- Creation d'un clone
  var O_Clone = O_Select.cloneNode(true);
  //-- Changement id et name
  O_Clone.id   = "S_NEW_" +Compteur;
  O_Clone.name = "S_NEW_" +Compteur;
  //-- Ajout dans la cellule
  O_Cell.appendChild( O_Clone);
  //-- Just for Test
  Write_Info( "-------------");
  Write_Info( "O_Table = "     +O_Table.rows[NbrLigne].cells[0].innerHTML);
  Write_Info( "First.name = "  +O_Table.rows[NbrLigne].cells[0].firstChild.name);
  Write_Info( "Clone.name = "  +O_Clone.name);
}

//-------------
function Test(){
  if( document.F_MAIN.S_NEW_1)
    alert( document.F_MAIN.S_NEW_1.options[document.F_MAIN.S_NEW_1.selectedIndex].text);
}
//-------------------------
function Show_Select( obj_){
  var Html = ''
  Html += 'ID\t= '   +obj_.id +'\n';
  Html += 'NAME\t= ' +obj_.name +'\n';
  Html += 'OPTION\t= ' +obj_.options[obj_.selectedIndex].text;
  alert( Html);
}
</script>
</head>
<body>
<br><input name="button" type="button" style="width:150px; margin:5px" onClick="Create_Ligne( 'T_INSERT');" value="New SELECT">
<br><input name="button" type="button" style="width:150px; margin:5px" onClick="Test();" value="Test S_NEW_1">
<form name="F_MAIN">
<table id="T_INSERT" width="400">
  <tr>
    <td>
      <select id="S_LIST" name="S_LIST" size="1" style="margin: 5px; width: 150px; color: rgb(0, 0, 255); font-family: Verdana; font-weight: bold;" onchange="Show_Select(this);">
        <option>IExplorer</option>
        <option>FireFox</option>
        <option>NetScape</option>
        <option>Op&eacute;ra</option>
        <option>Safari</option>
      </select>
    </td>
    </tr>
</table>
</form>
<div id="D_INFO" style="position:absolute;top:0px;left:300px">
<textarea id="T_INFO" COLS="80" ROWS="20"></textarea>
</div>
</body>
</html>


Fais en bon usage...

;0)

Merci,

mais le problème n'est pas résolu pour autant !! DSL.
En fait, dans ta fonction Create_Ligne( where_),si en plus de modifier le nom et l'id, tu modifies aussi le onchange de ton nouvel objet :

O_Clone.onchange = "Show_Select(this);";

Et bien tu te rendras compte que cela ne fonctionne plus !!
Et c'est plutot la que se situe mon probleme ;)



En esperant y arriver un jour...
@+