时间戳

首页 > 解决方案 > 使用 jQuery 存储动态添加的 textarea 元素的内容

jquery - 使用 jQuery 存储动态添加的 textarea 元素的内容

问题描述

感谢 Rory McCrossan，我有一个使用 jQuery动态附加元素的工作解决方案。textarea也许 textarea 元素的动态附加几乎完全是多余的，但我有我的理由。接下来是工作场景：用户从下拉列表中选择一个或多个选项，每个选项都会显示相应的 DIV 部分，并且连续显示一个textarea动态添加到该部分。如果未选择某个选项，则隐藏 DIV 并删除文本区域。但是这里存在一个不便：如果用户将一些文本添加到动态附加文本区域，然后他/她决定选择一个附加选项，取消选择或不选择其他选项，则先前添加的文本将丢失。当用户选择附加选项时，如何保留先前添加的文本以及相应的选定选项/文本区域？

这是讨论的解决方案：

$("#dist").change(function() {
  $('.dist-box').hide().find('textarea').remove();
  if (!this.value)
    return;

  let idSelector = $(this).val().map(v => `#${v}`).join(',');
  $(idSelector).append(function() {
    return `<textarea name="${this.id}"></textarea>`
  }).show();
}).change();
.dist-box {
  color: #fff;
  padding-top: 10px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="dist[]" id="dist" class="dist" multiple="">
  <option value="dih">dih</option>
  <option value="vii">vii</option>
  <option value="des">des</option>
</select>

<div id="dih" class="dih dist-box" style="color: initial; display: none;">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>

<div id="vii" class="vii dist-box" style="color: initial; display: none;">
  Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</div>

<div id="des" class="des dist-box" style="color: initial; display: none;">
  Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</div>

标签： jquery

解决方案

您可以通过将 textarea 的内容存储在data其父 div 的属性中来实现此目的。并在您添加回文本区域时恢复它。

$("#dist").change(function() {
  $('.dist-box').each(function() {
    $(this).data('val',$('textarea',this).val());
    $(this).hide().find('textarea').remove();
  })
  
  if (!this.value)
    return;

  let idSelector = $(this).val().map(v => `#${v}`).join(',');
  $(idSelector).append(function() {
    return `<textarea name="${this.id}">${$(this).data('val') || ""}</textarea>`
  }).show();
}).change();
.dist-box {
  color: #fff;
  padding-top: 10px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="dist[]" id="dist" class="dist" multiple="">
  <option value="dih">dih</option>
  <option value="vii">vii</option>
  <option value="des">des</option>
</select>

<div id="dih" class="dih dist-box" style="color: initial; display: none;">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>

<div id="vii" class="vii dist-box" style="color: initial; display: none;">
  Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</div>

<div id="des" class="des dist-box" style="color: initial; display: none;">
  Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</div>

推荐阅读