使用 jQuery 动态附加 textarea 元素 [英] Dynamic appending of the textarea elements with jQuery

问题描述

我有一个包含一些选项的下拉列表.可以一次选择多个选项.选择某些选项时，显示了相应的隐藏Div.

现在我需要将 textarea 动态添加到显示的 div - 而不是全部.如果取消选择某个选项，则隐藏相应的 div，并且必须从中删除添加的 textarea 输入.我该怎么做?

$("#dist").change(function() {var optionValue = $(this).val();如果(选项值){$(".dist-box").hide();for (var k in optionValue) {$('div.' + optionValue[k]).show();}} 别的 {$(".dist-box").hide();}}).change();

.dist-box {颜色:#fff;填充顶部:10px；显示:无；}

<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></选择><div id="dih" name="dih" class="dih dist-box" style="color: initial; display: none;">Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.埃尼马萨.Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

<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.在 enim justo、rhoncus ut、imperdiet a、venenatis vitae、justo.

<div id="des" name="des" class="des dist-box" style="color: initial; display: none;">Nullam dictum felis eu pede mollis pretium.整数提示.Cras dapibus.Vivamus elementum semper nisi.Aenean vulputate eleifend Tellus.

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

解决方案

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

$("#dist").change(function() {$('.dist-box').hide().find('textarea').remove();如果(！this.value)返回;让 idSelector = $(this).val().map(v => `#${v}`).join(',');$(idSelector).append(function() {return `<textarea name="${this.id}"></textarea>`}).展示();}).change();

.dist-box {颜色:#fff;填充顶部:10px；显示:无；}

<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></选择><div id="dih" class="dih dist-box" style="color: initial; display: none;">Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.埃尼马萨.Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

<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.在 enim justo、rhoncus ut、imperdiet a、venenatis vitae、justo.

<div id="des" class="des dist-box" style="color: initial; display: none;">Nullam dictum felis eu pede mollis pretium.整数提示.Cras dapibus.Vivamus elementum semper nisi.Aenean vulputate eleifend Tellus.