jqueryで選択した番号に従ってクローン化する

Question

私は真剣な助けが必要です！私はホテルの検索エンジンを作ろうとしています。選択したボックスから部屋の数を取得し、部屋の選択ボックスで選択した回数だけ選択ボックスのdivを複製する必要があります。私はこれが理にかなってほしい。私はまた、部屋1、部屋2、部屋3などにdivのテキストを変更する必要があります。ここで私が始めたことの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

のようなもののために私はそのあなたが探しているものかどうかを確認しhttp://jsfiddle.net/ryanfernandes/YxXtY/81/であなたのjsfiddleを更新しました。

あなたのdivにはユニークなIDが付いているので、選択した番号に基づいて部屋を削除/非表示する機能が追加されました。

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