Fügen Sie das HTML-control(s) per javascript

Etwas ist, entzieht sich mir ... es scheint offensichtlich zu sein, aber ich kann nicht ganz herausfinden.

Möchte ich hinzufügen/entfernen ein paar HTML-controls auf eine Seite (plain old html) ändert ein Benutzer den Wert einer dropdown-Liste. Ein Beispiel ist das hinzufügen oder entfernen "die Anzahl der Gäste in diesem Raum" textbox für jeden (einer Anzahl) Zimmer gebeten ...

So, wenn ein Benutzer wählt:

1 Zimmer, es gibt ein Textfeld

2 Zimmer, gibt es zwei Textfelder

3 Zimmer, drei text-Boxen

wieder auf 2 Zimmer, zwei Textfelder

und so weiter ...

InformationsquelleAutor brmore | 2008-11-09

  1. 4

    Gerade mit DOM und Javascript Sie möchten, um zu ändern, die InnterHtml Eigenschaft eines DOM-Objekt, das enthält die text-Boxen...wahrscheinlich ein div. So würde es Aussehen:

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

    Mithilfe einer Javascript-Bibliothek wie jQuery machen könnte, die Dinge ein wenig einfacher:

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

$("#myContainerDiv").append(html);
    Eine andere Empfehlung für jQuery 🙂
    Ha! ... Bekomme ich es ... vielen Dank für das treten lose Spinnweben und Fusseln.
    Kein problem...ich bin ein wenig schockiert mich, dass es frisch war an einem Samstag Abend 🙂

    InformationsquelleAutor ckramer

  2. 3

    für Ihre select-Liste von Zimmer, fügen Sie ein onchange-event-handler ein - /ausblenden des text-Boxen.

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

    InformationsquelleAutor scunliffe

  3. 1

    gegeben HTML:

    <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 />';
  } 
}

    InformationsquelleAutor Owen

Schreibe einen Kommentar