Question

尝试为旅游网站创建表单。对于其中一项功能，我想让用户选择他们想要旅行的孩子数量。随后，我希望表单添加新的选择字段，其数量取决于所选子项的数量。这就是我到目前为止所做的：

HTML：

<select 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>
    <option value ="7">7</option>
</select>
<div id="childrenAge"></div>

JS

$("select#children").on("change", function() { 
    var number = parseInt($("#children").val());
    var newDropLabel = $("#childrenAge").append("<label>Age of children: </label>");
    var newDropList = $('<select class="Age"><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><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></select>');
    $("div#childrenAge").append(newDropLabel);
    for (i = 0; i < number; i++) {
       $("div#childrenAge").append(newDropList);   
    };
});

选择一个数字后，会生成新标签，只生成一个新的select元素。我已经检查过，数字变量给出了正确的数字值输出。不太确定为什么它不起作用。

我还想为每个新的选择字段添加一个标签，例如＆＃34; Child 1＆＃34;每次都会增加，具体取决于所选孩子的数量。

任何提示都会很棒。

感谢。

Answer 1

http://jsfiddle.net/ka4fm9ap/

这样，每当你改变子项数时，就会有精确的选择元素数

$("select#children").on("change", function () {
    var number = parseInt($("#children").val());

    var label = "<label>Age of children: </label>";
    var newDropList = '<select class="Age"><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><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></select>';
    var html = '';
    $("#childrenAge").html('');
    html += label;
    for (i = 0; i < number; i++) {
        html += newDropList
    };

    $("#childrenAge").html(html);
});

Answer 2

这是一种方法：

＆＃13;

// binding a change event-handler to the '#children' element:
$('#children').on('change', function() {
  // when using parseInt() don't forget the radix (the number base),
  // in this case '10':
  var n = parseInt(this.value, 10),
  // creating a <label> element, setting its text to 'Age of child':
    label = $('<label />', {
      'text': 'Age of child'
    }),
  // creating a <select> element:
    select = $('<select />', {
      'class' : 'Age'
    }),
  // getting a reference to the element to which the new <select> elements are
  // going to be added, and emptying that element:
    recipient = $('#childrenAge').empty(),
  // empty variables for use within the later loop:
    cloneLabel, cloneSelect;
  // adding <option> elements to the select (for ages 0-17, assuming
  // that 18 is the appropriate age for 'adulthood' to begin):
  for (var o = 0; o < 18; o++) {
    // new Option(0,0) returns an <option> element, setting its value and text to
    // the variable 'o':
    select.append(new Option(o, o));
  }
  // if there's only one child it seems redundant to specify
  // 'child 1', so we just add the relevant <label> and <select>:
  if (n === 1) {
    recipient.append(label.append(select));
  // otherwise (assuming that we have a positive number of children:
  } else if (n > 0) {

    // using a for loop from 0 to the maximum number of children:
    for (var i = 0; i < n; i++) {
      // cloning the previously created <label> and <select> elements:
      cloneLabel = label.clone();
      cloneSelect = select.clone();

      // appending the cloned <label> to the recipient element:
      recipient.append(cloneLabel.text(function(_, t) {
        // updating the text of the <label>, appending a space and the current
        // value of 'i + 1':
        return t + ' ' + (i + 1);
      // and appending the <select> element to the <label>:
      }).append(cloneSelect));
    }
  }
});

＆＃13;

label {
  display: block;
}
label select {
  margin-left: 0.5em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select 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>
  <option value="7">7</option>
</select>
<div id="childrenAge"></div>

＆＃13;

参考文献：

JavaScript的：
- Option() constructor。
- parseInt()。
jQuery的：
- append()。
- clone()。
- empty()。
- on()。
- text()。

使用jQuery在表单中添加额外的html选择输入字段

2 个答案: