Ajouter un (des) contrôle (s) HTML via javascript

Question

Quelque chose m'échappe ... cela semble évident, mais je n'arrive pas à le comprendre.

Je veux ajouter/supprimer un couple de contrôles HTML à une page (plaine ancien html) quand un utilisateur change la valeur d'une liste déroulante. Un exemple est d'ajouter ou de supprimer un « nombre de personnes dans cette salle » pour chaque zone de texte (d'un nombre) de pièces demandées ...

Donc, si un utilisateur sélectionne:

1 pièce, il y a un zone de texte

2 chambres, il y a deux zones de texte

3 chambres, trois zones de texte

Retour à 2 chambres, deux zones de texte

et s o on ...

Answer 1

En utilisant DOM et Javascript droit que vous voulez modifier la propriété InnterHtml d'un objet DOM qui contiendra les zones de texte ... très probablement un div. Donc, il ressemblerait à quelque chose comme:

var container = document.getElementById("myContainerDiv"); 
var html; 
for(var i = 0; i < selectedRooms; i++) 
{ 
    html = html + "<input type=text ... /><br />"; 
} 
container.innerHtml = html; 

En utilisant une bibliothèque Javascript comme jQuery pourrait rendre les choses un peu plus facile:

var html; 
for(var i = 0; i < selectedRooms; i++) 
{ 
    html = html + "<input type=text ... /><br />"; 
} 

$("#myContainerDiv").append(html); 

Answer 2

pour votre liste de pièces, ajoutez un gestionnaire d'événement onchange qui affichera/cachera les boses de texte.

<script> 
    //swap $ with applicable lib call (if avail) 
    function $(id){ 
    return document.getElementById(id); 
    } 
    function adjustTexts(obj){ 
    var roomTotal = 4; 
    var count = obj.selectedIndex; 
    //show/hide unrequired text boxes... 
    for(var i=0;i<roomTotal;i++){ 
     if(i < count){ 
     $('room'+ (i+1)).style.display = 'block'; 
     } else { 
     $('room'+ (i+1)).style.display = 'none'; 
     } 
    } 
    } 
</script> 


<select name="rooms" onchange="adjustTexts(this);"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
</select> 

<div id="room1"> 
    <label>Room 1</label>:<input type="text" name="room1text"/> 
</div> 

<div id="room2" style="display:none;"> 
    <label>Room 2</label>:<input type="text" name="room2text"/> 
</div> 

<div id="room3" style="display:none;"> 
    <label>Room 3</label>:<input type="text" name="room3text"/> 
</div> 

<div id="room4" style="display:none;"> 
    <label>Room 4</label>:<input type="text" name="room4text"/> 
</div> 

Answer 3

HTML donné:

<select name="rooms" id="rooms"> 
    <option value="1">1 room</option> 
    <option value="2">2 rooms</option> 
    <option value="3">3 rooms</option> 
</select> 
<div id="boxes"></div> 

javascript:

document.getElementById('rooms').onchange = function() { 
    var e = document.getElementById('boxes'); 
    var count = parseInt(document.getElementById('rooms').value); 
    e.innerHTML = ''; 

    for(i = 1; i <= count; i++) { 
    e.innerHTML += 'Room '+i+' <input type="text" name="room'+i+'" /><br />'; 
    } 
}