将选择作为文本追加到文本字段

Question

我希望能把一个选择作为文本追加到文本字段中。

详细内容。

• 网站上有两个单选按钮

• 这些单选按钮有 "仅完整装运 "或 "部分装运 "的输入。

• 当选择其中一个输入时，我想将该输入的文本（例如 "Complete Shipment Only"）附加到它下面的文本字段。

每选择一次，之前附加的文本就会自动删除，然后再次添加。否则，我可能会在文本字段中出现几行 "Complete Shipment Only"。

这是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>

Answer 1

您可以使用 change 事件，这样每当单选按钮发生变化时，这个事件就会被调用，然后你可以使用 .html()用新的内容替换之前的文本区域内容。

演示代码 :

$("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>