0

我的网站有一段带有 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 中写入我的文本？

4

2 回答 2

1

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

  1. 遍历div的每个子节点。
  2. 确定每个是文本节点还是选择框。
  3. 从每个节点中提取值。
  4. 将组合值插入文本区域。

示例 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;
}

这是一个演示这一点的jsfiddle 演示。在这个演示中，onchange每个选择框都添加了一个事件处理程序，当其中一个选择框发生变化时，它会更新文本区域。

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

于 2012-12-29T00:57:35.440 回答
0

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

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

于 2012-12-28T22:33:28.237 回答