单击重置按钮后未添加数据，我们再次重新加载页面以添加数据

Question

$("#copyBtn").click(function() {
  var selected = $("#selectBox").val();
  $("#output").append(" Origin :" + selected);
});
$("#copyBtn").click(function() {
  var selected = $("#selectBox1").val();
  $("#output").append("\n Case : " + selected);
});
$("#copyBtn").click(function() {
  var selected = $("#selectBox2").val();
  $("#output").append("\n Customer  : " + selected);
});
$("#copyBtn").click(function() {
  var selected = $("#textbox").val();
  $("#output").append("\n Vendor : " + selected);
});
$("#copyBtn").click(function() {
  var selected = $("#textbox1").val();
  $("#output").append("\n Product : " + selected);
});

$(document).ready(function() {
  $('#btn').click(function() {
    /*Clear all input type="text" box*/
    $('#form input[type="text"]').val('');
    /*Clear textarea using id */
    $('#form #output').val('');
    $('#form #selectBox').val('Select');
    $('#form #selectBox1').val('Select');
    $('#form #selectBox2').val('Select');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" class="private-comments-form">
  <div class="col-md-8 formdiv">
    <div class="row">
      <div class="col-xs-6 form-group"><label for="sel1">Select Origin of Case</label>
        <select class="form-control" id="selectBox">
          <option>Select</option>
          <option>Customer</option>
          <option>Tech</option>
          <option>Tec</option>
          <option>Account</option>
          <option>Team</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Select Case Requestor</label>
        <select class="form-control" id="selectBox1">
          <option>Select</option>
          <option>Vendor</option>
          <option>Contact</option>
          <option>Account</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Customer Request</label>
        <select class="form-control" id="selectBox2">
          <option>Select</option>
          <option>Add</option>
          <option>Update</option>
          <option>Remove</option>
          <option>Troubleshoot</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Vendor :</label> <input class="form-control" type="text" id="textbox" /></div>
      <div class="col-xs-6 form-group"> <label for="sel1">&nbsp;</label> <input class="form-control js-textareacopybtn" id="copyBtn" type="button" value="Get Content" /></div>
      <div class="col-xs-6 form-group"> <label for="sel1">Product :</label> <input class="form-control" type="text" id="textbox1" /></div>
      <div class="col-xs-12 form-group"> <label for="sel1">Copy Content :</label><textarea class="col-xs-12 js-copytextarea" id="output" name="textarea"></textarea></div>
      <div class="col-xs-12 form-group"> <input type="button" class="reset " id="btn" onclick="myFunction()" value="Reset" /></div>
    </div>
  </div>
</form>

在单击“重置”按钮之后，再次单击“获取内容”数据时，不会附加 正在附加用于追加数据和重置脚本的脚本 请检查代码

Answer 1

Explanation

Any jQuery code that you plan to use in order to access DOMs (input, textarea, etc). Its better if they are executed inside the .ready method.

What this method does its to wait until the whole content of the page is loaded. Then, you can have access to all the DOMs without troubles.

Next, for the #copyBtn, you only needed to bind the click events once.

$(document).ready(function() {

  $("#copyBtn").click(function() {
    var text = " Origin :" + $("#selectBox").val();
    text += "\n Case : " + $("#selectBox1").val();
    text += "\n Customer  : " + $("#selectBox2").val();
    text += "\n Vendor : " + $("#textbox").val();
    text += "\n Product : " +  $("#textbox1").val()
    $("#output").val(text);   
  });

  $('#btn').click(function() {
    /*Clear textarea using id */
    $('#output').val('');
    $('#form #selectBox').val('Select');
    $('#form #selectBox1').val('Select');
    $('#form #selectBox2').val('Select');
    /*Clear all input type="text" box*/
    $('#form input[type="text"]').val('');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" class="private-comments-form">
  <div class="col-md-8 formdiv">
    <div class="row">
      <div class="col-xs-6 form-group"><label for="sel1">Select Origin of Case</label>
        <select class="form-control" id="selectBox">
          <option>Select</option>
          <option>Customer</option>
          <option>Tech</option>
          <option>Tec</option>
          <option>Account</option>
          <option>Team</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Select Case Requestor</label>
        <select class="form-control" id="selectBox1">
          <option>Select</option>
          <option>Vendor</option>
          <option>Contact</option>
          <option>Account</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Customer Request</label>
        <select class="form-control" id="selectBox2">
          <option>Select</option>
          <option>Add</option>
          <option>Update</option>
          <option>Remove</option>
          <option>Troubleshoot</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Vendor :</label> <input class="form-control" type="text" id="textbox" /></div>
      
      <div class="col-xs-6 form-group"> <label for="sel1">Product :</label> <input class="form-control" type="text" id="textbox1" /></div>
<div class="col-xs-6 form-group"> <label for="sel1">&nbsp;</label> 

<input class="form-control js-textareacopybtn" id="copyBtn" type="button" value="Get Content" /></div>      

      <div class="col-xs-12 form-group"> <label for="sel1">Copy Content :</label><textarea class="col-xs-12 js-copytextarea" id="output" name="textarea"></textarea></div>
      <div class="col-xs-12 form-group"> <input type="button" class="reset " id="btn" value="Reset" /></div>
    </div>
  </div>
</form>

Answer 2

当您需要向文本区域添加值时，应使用.val()， 您应该获取旧值并附加要添加的内容。 因此您的JS代码应如下所示：

$(document).ready(function() {
  $("#copyBtn").click(function() {
    var selected_origin = $("#selectBox").val();
    var selected_case = $("#selectBox1").val();
    var selected_customer = $("#selectBox2").val();  
    var selected_vendor = $("#textbox").val();
    var selected_product = $("#textbox1").val();

    $("#output").val($("#output").val() + " Origin :" + selected_origin);
    $("#output").val($("#output").val() + "\n Case : " + selected_case);
    $("#output").val($("#output").val() + "\n Customer  : " + selected_customer);
    $("#output").val($("#output").val() + "\n Vendor : " + selected_vendor);
    $("#output").val($("#output").val() + "\n Product : " + selected_product);
  });


  $('#btn').click(function() {
    /*Clear all input type="text" box*/
    $('#form input[type="text"]').val('');
    /*Clear textarea using id */
    $('#form #output').val('');
    $('#form #selectBox').val('Select');
    $('#form #selectBox1').val('Select');
    $('#form #selectBox2').val('Select');
  });
});

，或者，如果您想保持.append()不变（我不建议这样做，因为如果有人在文本区域中进行编辑，它将无法再使用），  因此，您必须清除文本区域的内部HTML，而不是值（因为在这种情况下，您是将文本节点附加到文本区域而不更改其值）

，因此您应将重置功能中的$('#form #output').val('');替换为 这个
$('#form #output').html('');
或
$('#form #output').text('');
它也将起作用。