时间戳

首页 > 解决方案 > 使用 jQuery 动态添加 textarea 元素

html - 使用 jQuery 动态添加 textarea 元素

问题描述

我有一个带有一些选项的下拉列表。可以一次选择多个选项。选择某些选项时，会显示相应的隐藏 div。

现在我需要动态地将 a 添加textarea到显示的 div 中——而不是所有的。如果取消选择某个选项，则相应的 div 将被隐藏，并且必须从中删除添加的 textarea 输入。我怎样才能做到这一点？

$("#dist").change(function() {
  var optionValue = $(this).val();
  if (optionValue) {
    $(".dist-box").hide();
    for (var k in optionValue) {
      $('div.' + optionValue[k]).show();
    }
  } else {
    $(".dist-box").hide();
  }
}).change();
.dist-box {
  color: #fff;
  padding-top: 10px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.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" name="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" name="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" name="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>

https://jsfiddle.net/u3tm7b0r/1/

标签： htmljquery

解决方案

为了实现您的需要，您可以.dist-box在进行更改时隐藏所有元素，然后使用从 中选择的值select来构建选择器字符串以定位所需的元素，然后将 textarea 附加到它们并显示它们：

$("#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.4.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>

话虽如此，textarea元素的动态附加似乎几乎完全是多余的，因为textarea当父级可见时它们始终存在.dist-box，因此您可以将它们保留在 DOM 中但与父级一起隐藏。

推荐阅读