Question

我需要一些认真的帮助！我正在尝试创建一个酒店搜索引擎。我需要从选择框中获取房间数量并克隆选择框的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>

JQUERY：

$("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/

Answer 1

我已在http://jsfiddle.net/ryanfernandes/YxXtY/81/更新了您的jsfiddle，看看它是否正在寻找。

我修改了html，以便你的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. 
}

根据jquery中选择的数字克隆div

2 个答案: