Klonen div nach Anzahl in jquery ausgewählt

Question

Ich brauche einige ernsthafte Hilfe! Ich versuche eine Hotelsuchmaschine zu erstellen. Ich muss die Anzahl der Räume aus einem Auswahlfeld ermitteln und ein div von Auswahlfeldern so oft klonen, wie in der Auswahlbox für Räume ausgewählt ist. Ich hoffe das macht Sinn. Ich muss auch den Text des Divs zu Raum 1, Raum 2, Raum 3 usw. ändern. Hier ist ein Spiel von dem, was ich angefangen habe und ich weiß nicht, wohin ich von hier aus gehen soll. http://jsfiddle.net/liveandream/YxXtY/ und hier ist mein Code: HTML:

Rooms:<select name="rooms" id='rooms'> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     </select><br> 
<div id="room">Room 1: 
<br /> 
<div class='left' >Adults: 
    <select name="adults" id='adults'> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option></select></div> 
<div class='left'>Children: 
    <select name="children" id="children"> 
     <option selected="selected">0</option> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select></div> 
<div class='left' id="childage">Child Ages: 
    <select name="children" > 
     <option selected="selected">0</option> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select></div><br clear="all" /></div> 
<div id="txt"></div> 

JQUERY:

$("select#rooms").change(function() { 
      var str = ""; 
      $("select#rooms option:selected").each(function() { 
       $("#room").clone(2).insertAfter("#txt"); 
       }); 
      $("#txt").text(str); 
     }) 
     .change();​ 

Vielen Dank im Voraus für jeden bereit zu helfen!

EDIT: Ich brauche es, so etwas zu sein: http://www.helloweekends.com/

Answer 1

ich Ihre jsfiddle bei http://jsfiddle.net/ryanfernandes/YxXtY/81/ aktualisiert haben Sehen Sie, wenn das, was Sie suchen.

Ich habe den HTML-Code überarbeitet, so dass Ihre divs eindeutige IDs haben und Funktionen zum Entfernen/Verbergen der Räume basierend auf der ausgewählten Nummer enthalten.

Answer 2

Anstatt nur aus bestehenden HTML das Element zu kopieren, würde es besser sein, diese Elemente mit JavaScript zu erstellen. Also für Ihre Funktion, die die ausgewählte Anzahl der Zimmer genannt, wenn geändert wird, so etwas wie

function() { 
    var html = ""; 
    var i; 
    for(i = 0; i < this.value; i++) 
    { 
     html += "<div class='room'>Room " + (i + 1); 
     html += "<br clear='all' />"; 
     html += "<div class='left' >Adults:<select name='adults' id='adults'>";   

     // ... Create the rest of the form part for the room ... 

    }  
    $("#roomsContainer").html(html); // #roomsContainer is a container around where the 
            // menus for the individual rooms should be. 
}