Question

我有三个多选下拉列表，从这些下拉列表中进行选择后，用户按下提交按钮，列表文本显示在textarea中，但是如果用户更改了textarea中的某些文本，然后再次从下拉列表中选择另一个列表，然后按Submit文本在textarea中没有改变。我尝试了一些解决方案，例如那个人说使用@Data @NoArgsConstructor @JsonInclude(JsonInclude.Include.NON_NULL) public class FieldInfo{ @JsonProperty("field_one") private String fieldOne; @JsonProperty("field_two") private String fieldTwo; }而不是$("#total_selections").val("");的解决方案，但是此后在文本区域中什么也没显示。

$("#total_selections").html("");

Answer 1

$("#selection_button").click(function () {
               var  sel = $('#add_item option:selected').val();
     const ele= `<p style = "display:inline; background-color: #e9ebee; color: black; margin: 2px; padding: 1px;"> ${sel} <span style="cursor: pointer" onclick= "this.parentElement.remove()"> x</span> </p>`;
     $("#total_selections").append(ele);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  id="add_item">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

  <button type="button"  id="selection_button" >Select Tags</button>
<div contenteditable="false" style="min-height:50px; border:1px solid black; 
 width:300px;" id="total_selections"></div>

append函数会更改DOM，这不是您要在此处进行的操作（这是打破textarea元素默认行为的原因）。

尝试使用下拉列表文本进行更改时，在textarea中更改文本后未更改？

1 个答案: