0

Web サイトに 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 を使用してテキストエリア内にテキストを書き込む関数を呼び出す必要がありますか?

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イベント ハンドラーが各選択ボックスに追加され、選択ボックスの 1 つが変更されたときにテキスト領域が更新されます。

また、デモの HTML が編集され、テキストエリア内の結果のテキストの書式設定が改善されました。または、子ノードをトラバースするときにテキスト値をフィルタリングすることもできます (改行とタブ文字を削除します)。

于 2012-12-29T00:57:35.440 に答える
0

onClick ですでに JavaScript を使用しています。選択したテキストをドロップダウンから取得し、それを他のビットとマージする onClick から呼び出す、より複雑なビットが必要です。

テキストエリアに配置するテキストを作成するときに、html ページのテキスト コンテンツを複製する必要があります。

于 2012-12-28T22:33:28.237 に答える