将选择作为文本附加到文本字段答案

【问题标题】：Append Selection to Text Field as text将选择作为文本附加到文本字段
【发布时间】：2020-08-30 05:37:43
【问题描述】：

我希望将选择作为文本附加到文本字段。

详情：

网站上有两个单选按钮
这些单选按钮输入“仅完成发货”或“部分发货”
选择其中一个输入后，我想将该输入的文本（例如“仅完成发货”）附加到其下方的文本字段中。

每次选择时，先前附加的文本将自行删除并再次添加。如果没有，我可能会在文本字段中出现几行“仅完成装运”。

这是 HTML：

<div class="shipinfo" style="padding-top: 10px;">
    <input type="radio" id="complete_shipment_only" name="shipping_preference" value="Complete Shipment Only" required <% if(shipping_preference.equals("Complete Shipment Only")) { %> checked <% } %>>
    <label for="complete_shipment_only">Complete Shipment Only</label><br>
    <input type="radio" id="partial_shipments_available" name="shipping_preference" value="Partial Shipments Acceptable" <% if(shipping_preference.equals("Partial Shipments Acceptable")) { %> checked <% } %>>
    <label for="partial_shipments_available">Partial Shipments Acceptable</label><br>
</div>

<div class="shipinfo" style="padding-top: 10px;">
    <label><%=eclSystem.translate(silver.getLanguage(), "Shipping Instructions")%></label><br>
    <textarea name="SHIP_INST" data-sp-id="shipInstrInput" class="inputFieldBody" style="height:55px;" rows="4" cols="54" wrap="virtual"><%=order.getShippingInfo().getInstructions()%></textarea>
</div>

【问题讨论】：

标签： html jquery jsp append

【解决方案1】：

您可以使用 jquery 的 change 事件，这样每当单选按钮发生更改时，就会调用此事件，然后您可以使用 .html() 将 textarea 的先前内容替换为新内容。

演示代码：

$("input[type='radio']").on("change", function() {
//getting value of radio buttonselected
  var value = $(this).val();
  //replacing previous content with new one
  $(".inputFieldBody").html(value);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="shipinfo" style="padding-top: 10px;">
  <input type="radio" id="complete_shipment_only" name="shipping_preference" value="Complete Shipment Only" checked required>
  <label for="complete_shipment_only">Complete Shipment Only</label><br>
  <input type="radio" id="partial_shipments_available" name="shipping_preference" value="Partial Shipments Acceptable" <%>
  <label for="partial_shipments_available">Partial Shipments Acceptable</label><br>
</div>

<div class="shipinfo" style="padding-top: 10px;">
  <label></label><br>
  <textarea name="SHIP_INST" data-sp-id="shipInstrInput" class="inputFieldBody" style="height:55px;" rows="4" cols="54" wrap="virtual">Complete Shipment Only</textarea>
</div>

【讨论】：