0

深刻な助けが必要です！ホテルの検索エンジンを作成しようとしています。選択ボックスから部屋の数を取得し、部屋の選択ボックスで選択された回数と同じ回数、選択ボックスの div を複製する必要があります。これが理にかなっていることを願っています。また、div のテキストを Room 1、Room 2、Room 3 などに変更する必要があります。 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>

Jクエリ:

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

喜んで手伝ってくれる人に前もって感謝します！

編集: 次のようなものにする必要があります: http://www.helloweekends.com/

4

2 に答える 2

1

http://jsfiddle.net/ryanfernandes/YxXtY/81/で jsfiddle を更新しました。探しているものかどうかを確認してください。

html を修正して、div が一意の ID を持つようにし、選択した数に基づいて部屋を削除/非表示にする機能を含めました。

于 2012-04-11T09:49:05.900 に答える
0

単に既存の 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. 
}
于 2012-04-11T04:14:16.580 に答える