клонирование div в соответствии с номером, выбранным в jQuery

Question

Мне нужна серьезная помощь! Я пытаюсь создать поисковую систему отеля. Мне нужно получить количество комнат из окна выбора и клонировать div из блоков выбора столько же раз, сколько выбрано в окне выбора номеров. Я надеюсь в этом есть смысл. Мне также нужно изменить текст div на Комнату 1, Комнату 2, Комнату 3 и т. Д. Вот jsfiddle того, что я начал, и я не знаю, куда идти отсюда. http://jsfiddle.net/liveandream/YxXtY/ и вот мой код: 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();​ 

Заранее спасибо всем, готовы помочь!

EDIT: Мне нужно, чтобы это было что-то вроде этого: http://www.helloweekends.com/

Answer 1

Я обновил свой jsfiddle в http://jsfiddle.net/ryanfernandes/YxXtY/81/ Смотрите, если его то, что вы ищете.

Я коснулся html так, чтобы ваши divs имели уникальные идентификаторы и включали в себя функциональность для удаления/скрытия комнат на основе выбранного номера.

Answer 2

Вместо того, чтобы просто скопировать элемент из существующего HTML, было бы лучше, чтобы создать эти элементы с помощью JavaScript. Так что для вашей функции, которая вызывается, когда выбранное количество комнат меняется, что-то вроде

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