Javascript 如何用div中的内容填充textarea，其中包含混合的文本和下拉选项？

我的网站上有一个带有madlib风格段落的部分，要求用户选择不同的内联下拉选项来完成段落

我的HTML

<div id="aspirate">
BONE MARROW ASPIRATE AND TOUCH PREPARATION: The aspirate smears contain 
    <select name=asp_1>
        <option> few </option>
        <option> adequate </option>
        <option> numerous </option>
    </select>
    <select name=asp_2>
        <option> cellular </option>
        <option> paucicellular </option>
        <option> acellular </option>
    </select>
    marrow particles. Myeloid precursors appear 
<select name=asp_3>
        <option> adequate </option>
        <option> decreased </option>
        <option> increased </option>
    </select>    
in number with
    <select name=asp_4>
        <option> full-spectrum maturation </option>
        <option> left-shifted maturation </option>
    </select>. Erythroid precursors appear 
    <select name=asp_5>
        <option> adequate </option>
        <option> decreased </option>
        <option> increased </option>
    </select> in number with full-spectrum maturation <select name=asp_6>
        <option> and mild megaloblastic changes </option>
        <option> and mild dyspoies characterized by nuclear membrane irregularities and increased mitoses </option>
        <option> and occasional binucleate forms </option>
    </select>. 
    Megakaryocytes are 
    <select name=asp_7>
        <option> adequate </option>
        <option> decreased </option>
        <option> increased </option>
    </select> in number and normal in morphology. No dysplastic changes or increased numbers of blast cells are identified. No lymphoid infiltrates are identified. 
    <select name=asp_9>
        <option> </option>
        <option> The direct smears and touch preparation slides show similar cellular composition. </option>
        <option> The direct smear slides show similar cellular composition.</option>
    </select>  The iron stain shows 
    <select name=asp_10>
        <option> </option>
        <option> no ring sideroblasts, and </option>
        <option> rare ring sideroblasts, and </option>
    </select>
    <select name=asp_11>
        <option> adequate storage iron</option>
        <option> decreased storage iron </option>
        <option> increased storage iron </option>
    </select>.
</div>

<br>
<input id="submit" type="button" value="Submit" onClick='document.getElementById("outPut4").innerHTML=document.getElementById("aspirate").innerText'>
<br>
<form>
<textarea id="outPut4" rows = 20 cols = 45></textarea>
</form>

骨髓抽吸和触摸准备：抽吸涂片包含
很少的
充足的
很多的
细胞的
少细胞
脱细胞
骨髓颗粒。出现髓样前体
充足的
降低
增加
与
全谱成熟
左移成熟
. 红系前体出现
充足的
降低
增加
全谱成熟的数量
轻度巨幼细胞改变
以及以核膜不规则和有丝分裂增加为特征的轻度发育不良
偶有双核形式
. 
巨核细胞是
充足的
降低
增加
数量多，形态正常。未发现发育异常变化或成纤维细胞数量增加。未发现淋巴浸润。
直接涂片和触摸制备载玻片显示出相似的细胞组成。
直接涂片显示相似的细胞成分。
铁渍显示
没有戒指，而且
罕见的环状成铁细胞，以及
充足的铁储存
铁的储存量减少
增加铁的储存量
.

---

这只返回减去下拉选择的文本？这可以只使用HTML来完成吗？或者我应该为每个下拉列表指定一个变量值，并使用javascript来调用一个函数，该函数将在textarea中写入我的文本？

您已经在onClick中使用javascript了。您需要一个更复杂的部分，您可以从onClick调用它，它将从下拉列表中获取所选文本，并将其与其他部分合并

---

在构建要放入文本区域的文本时，需要复制html页面中的文本内容。

基本上，它需要一个JavaScript函数来执行以下操作：

遍历div的每个子节点

确定每个节点是文本节点还是选择框

从每个节点提取值

将组合值插入文本区域

JavaScript示例：

function showText() {
    var html = '';
    // Get the first child node
    var dom = document.getElementById('aspirate').firstChild;
    while (dom) {
        if (dom.nodeType == 3) { // Text node
            html += dom.nodeValue; // Add the value
        }
        else if (dom.nodeName.toLowerCase() == 'select') { // Select box
            html += dom.value; // Add the selected value
        }
        dom = dom.nextSibling; // Get the next child node
    }
    // Display the combined values of the child nodes
    document.getElementById('outPut4').innerHTML = html;
}

这里有一个例子来说明这一点。在本演示中，向每个选择框添加了一个

onchange

事件处理程序，当其中一个选择框发生更改时，该处理程序将更新文本区域

---

此外，还对演示中的HTML进行了编辑，以改进textarea中生成文本的格式。或者，在遍历子节点时可以过滤文本值（删除换行符和制表符）。

谢谢。这是一个非常优雅的解决方案。我会尝试将你的js概念应用到我网站的其他部分，因为它认为它可以很容易地适应！