通过单击按钮从输入字段动态添加值到文本区域

我已经编辑了您的代码，更改了一些 id 并更改了脚本。您有一些具有相同 id 的元素。

<select class="small-field"  name="type" id="type" >
  <option>Laptop</option>
  <option>Desktop</option>
  <option>Printer</option>
</select>
<select class="small-field"  name="brand" id="model" >
  <option>HP</option>
  <option>Dell</option>
  <option>Advantech</option>
</select>
<input class="small-field" type="text" id="model_value" name="model" placeholder="model">
<input type="text" id="qty" name="quantity" placeholder="qty." style="width: 50px">
<input type="button"  id="addthis" style="width: 30px" value="+" class="button">
<textarea name="details" id="details"></textarea>

在脚本中，我获得了每个输入的值并显示在文本区域中。剧本将是

<script>
$("#addthis").click(function(){
  $("#details").val(
     $("#details").val() +
     "Type: "+$("#type").val() + 
      " , Brand: "+$("#model").val() +
      ", Model: "+$("#model_value").val() +
      ", Qty: "+$("#qty").val() +"'n"
  );
});
</script> 

http://jsfiddle.net/uwgnx2sw/1/

我希望它有所帮助。

为了确保这些值是串联的（并且保留所有以前输入的值），我已将您的 HTML 修改为以下内容（使用 <fieldset> 将相关项目分组在一起，并删除了各种子项的id属性以进行验证）：

<fieldset class="details">
  <select class="small-field" name="type">
    <option>Laptop</option>
    <option>Desktop</option>
    <option>Printer</option>
  </select>
  <select class="small-field" name="brand">
    <option>HP</option>
    <option>Dell</option>
    <option>Advantech</option>
  </select>
  <input class="small-field" type="text" name="model" placeholder="model">
  <input type="text" name="quantity" placeholder="qty." style="width: 50px">
</fieldset>
<input type="button" style="width: 30px" value="+" class="button">
<textarea name="details" id="details"></textarea>

和jQuery：

// binding the click event-handler to the '#addthis' element:
$('#addthis').on('click', function() {
  // creating a reference to all <fieldset class="details"> elements:
  var fieldsets = $('fieldset.details'),
    // getting the last of those <fieldset> elements:
    last = fieldsets.last();
  // hiding the last one,
  last.hide()
      // cloning it:
     .clone()
     // looking to its child-elements' value property:
     .children().prop('value', function(i, v) {
        // setting the value to the assigned default-value:
        return this.defaultValue;
  })
    // moving back to the previous selection, the cloned-<fieldset>:
    .end()
    // inserting the clone before the button:
    .insertBefore(this)
    // showing the cloned <fieldset>:
    .show();
  // setting the value of the #details element:
  $('#details').val(function() {
    // creating a map of:
    return fieldsets.map(function() {
      // ...a map of the children of each of the <fieldset> elements' children:
      return $(this).children().map(function() {
        // a string of the name, ': ' and values:
        return this.name + ': ' + this.value;
      // joining that together into an array, joined by ', ':
      }).get().join(', ');
    // joining those arrays together with newlines:
    }).get().join(''n');
  });
});

$('#addthis').on('click', function() {
  var fieldsets = $('fieldset.details'),
    last = fieldsets.last();
  last.hide().clone().children().prop('value', function(i, v) {
    return this.defaultValue;
  }).end().insertBefore(this).show();
  $('#details').val(function() {
    return fieldsets.map(function() {
      return $(this).children().map(function() {
        return this.name + ': ' + this.value;
      }).get().join(', ');
    }).get().join(''n');
  });
});

textarea {
  display: block;
  width: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="details">
  <select class="small-field" name="type">
    <option>Laptop</option>
    <option>Desktop</option>
    <option>Printer</option>
  </select>
  <select class="small-field" name="brand">
    <option>HP</option>
    <option>Dell</option>
    <option>Advantech</option>
  </select>
  <input class="small-field" type="text" name="model" placeholder="model">
  <input type="text" name="quantity" placeholder="qty." style="width: 50px">
</fieldset>
<input type="button" id="addthis" style="width: 30px" value="+" class="button">
<textarea name="details" id="details"></textarea>

引用：

• JavaScript：
  • Array.prototype.join() .
• j查询：
  • get() .
  • children() .
  • end() .
  • hide() .
  • insertBefore() .
  • map() .
  • prop() .
  • show() .
  • val() .