0

我正在构建一个表单，并使用 jQuery 添加动态字段。该表单包含一个选择字段（select 1 with id childs）：

  $("#childs").change(function() {
    var htmlString = "";
    var num = $("option:selected", this).val(); // max value is 6.
    for (var i = 0; i < num; i++) {
      htmlString += "Another set of fields";
    }
    $("#outputchilds").html(htmlString);
  });

这将在 ID为 outputchilds的元素上输出另一组字段。还有另一个选择字段（带有 id房间的select 2），使用相同的技术，这是生成房间字段的代码：#childs

  $("#rooms").change(function() {
    var htmlString = "";
    var num = $("option:selected", this).val(); // max value is 8.
    for (var i = 1; i < num; i++) {
      htmlString += 'Set of fields that contain #outputchilds element';
    }
    $("#outputrooms").html(htmlString);
  });

房间字段生成正确，但子字段（它们包含在房间字段中）未按预期显示。

我认为#outputchilds每个生成的字段集必须是唯一的，例如：#outputchilds-i，但是如何重构我的代码呢？

更新 application.js：

$(document).ready(function(){ 

  $("#rooms").change(function() {
    var htmlString = "";
    var num = $("option:selected", this).val();
    for (var i = 1; i < num; i++) {
      htmlString += '<div class="row-fluid">'+
                      '<div class="span1">'+
                        'Room '+ (i+1) +
                      '</div>'+
                      '<div class="span2">'+
                        '<div class="control-group">'+
                          '<label class="control-label">Children:</label>'+
                          '<select class="input-mini" id="children">'+
                            '<option value="0">0</option>'+
                            '<option value="1">1</option>'+
                            '<option value="2">2</option>'+
                            '<option value="3">3</option>'+
                            '<option value="4">4</option>'+
                            '<option value="5">5</option>'+
                            '<option value="6">6</option>'+
                          '</select>'+
                        '</div>'+
                      '</div>'+
                      '<div class="span7">'+
                        '<div class="row-fluid" id="outputchilds"></div>'+
                      '</div>'+
                    '</div>';
    }
    $("#outputrooms").html(htmlString);
  });

  $("#children").change(function() {
    var htmlString = "";
    var num = $("option:selected", this).val();
    for (var i = 0; i < num; i++) {
      htmlString +=   "<div class='span2'>"+
                        "<div class='control-group'>"+
                          "<label class='control-label'>Child "+ (i+1) +":</label>"+
                          "<select class='input-mini'>"+
                            "<option value='0'>0</option>"+
                            "<option value='1'>1</option>"+
                            "<option value='2' selected >2</option>"+
                            "<option value='3'>3</option>"+
                            "<option value='4'>4</option>"+
                            "<option value='5'>5</option>"+
                            "<option value='6'>6</option>"+
                            "<option value='7'>7</option>"+
                            "<option value='8'>8</option>"+
                            "<option value='9'>9</option>"+
                            "<option value='10'>10</option>"+
                            "<option value='11'>11</option>"+
                            "<option value='12'>12</option>"+
                            "<option value='13'>13</option>"+
                            "<option value='14'>14</option>"+
                            "<option value='15'>15</option>"+
                            "<option value='16'>16</option>"+
                            "<option value='17'>17</option>"+
                          "</select>"+
                        "</div>"+
                      "</div>";
    }
    $("#outputchilds").html(htmlString);
  });
})

索引.html：

<div class="row-fluid">
  <div class="span1">
    Room 1
  </div>
  <div class="span2">
    <div class="control-group">
      <label class="control-label">Children:</label>
      <select class="input-mini" id="children">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
      </select>
    </div>
  </div>
  <div class="span7">
    <div class="row-fluid" id="outputchilds">
      <!-- Dynamic Childs Age selects -->
    </div>
  </div>
</div>
<div id="outputrooms">
  <!-- Rooms fields -->
</div>
4

0 回答 0