Changer un input text par une listbox (dynamiquement)

**SPACHFR** · 07/05/2009, 15h44

Bonjour,

J'ai un DIV contenant plusieurs éléments.L'un de ces éléments est un "input" de type text.
En fonction du choix utilisateur souhaiterai changer cet input par une listbox (et inversement) sans avoir à mettre à jour l'ensemble du contenu du DIV.

Existe t' il une méthode pour réaliser cette action, ou dois je réécrire entièrement le contenu du DIV ?
(le div n'est pas créé via du DOM)

Merci

**franculo_caoulene** · 07/05/2009, 15h52

Salut,

Tu as Node.replaceChild() pour remplacer dans le div.

**SPACHFR** · 07/05/2009, 16h11

Merci pour cette réponse.

Cette méthode fonctionne t'elle même si le DIV n'a pas été créé via du DOM ?

Car via JavaScript je parviens bien à modifier la valeur de l'INPUT TEXT et à manipuler cet "objet" (le terme est peut être impropre) mais pas à le modifier en listBox.

**franculo_caoulene** · 07/05/2009, 16h13

Envoyé par SPACHFR

Cette méthode fonctionne t'elle même si le DIV n'a pas été créé via du DOM ?

Que veux-tu dire par là?

[edit] un code vaut mieux que deux "tu l'auras". peux-tu poster un code illustrant ce problème. Pas le code original, je dis bien un code minimaliste illustrant le problème.

**SPACHFR** · 07/05/2009, 16h30

En fait voici un exemple

Le div avant une action

Code :

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

1
2
3
4
5
 
<div id="conteneur">
<input type="button" id="bt1" onclick="changediv()">
<input type="text" id="Nom" value="">
</div>

sur appel de changediv(), je souhaiterai avoir le contenu suivant dans le div "conteneur" (sans avoir à réécrire l'ensemble du div)

Code :

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

1
2
3
4
5
6
7
 
<div id="conteneur">
<input type="button" id="bt1" onclick="changediv()">
<select  id="slt1">
<option value="opt1">option1</option>
</select>
</div>

L'input text devient une listBox
Je ne sais pas si cela est réalisable....

**franculo_caoulene** · 07/05/2009, 17h02

Des résultats existent en faisant une recherche, donc un de mes propres messages datant de quatre ans environ.

De plus SpaceFrog à développé tout un truc à ce sujet.

Je poste tout de même un code un code simple fonctionnant sous FF3, IE7, Opera9.6 et Safari3

Code xhtml :

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
38
39
40
41
42
43
44
45
46
47
48
<!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" lang="fr">
<head>
    <title>remplacer un élément</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <style type="text/css"></style>
</head>
<body>
  <button id="select" type="button" value="select">select</button>
  <button id="input" type="button" value="input">input</button>
  <form id="f" name="f" method="post">
  <div id="c">
    <input id="i" name="i" type="text" />
  </div>
  </form>
    <script type="text/javascript">
    var Utils = {
      toSelect : function(p, e) {
        var s = document.createElement("select");
        var o = document.createElement("option");
        var o1 = document.createTextNode("o1");
        s.id = "s";
        s.name = "s";
        o.value = "o1";
        o.appendChild(o1);
        s.appendChild(o);
        p.replaceChild(s, e);
      },
      toInput : function(p, e) {
        var i = document.createElement("input");
        i.id = "i";
        i.name = "i";
        i.type = "text";
        p.replaceChild(i, e);
      }
    };
    
    document.getElementById("select").onclick = function() {
      if (document.getElementById("i"))
        Utils.toSelect(document.getElementById("c"), document.getElementById("i"));
    }
    document.getElementById("input").onclick = function() {
      if (document.getElementById("s"))
        Utils.toInput(document.getElementById("c"), document.getElementById("s"));
    }
    </script>
</body>
</html>

Changer un input text par une listbox (dynamiquement)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager