フォームフィールドに基づいて変更されるテキスト

Question

一連の入力ボックスとドロップダウンメニューに基づいてプレビューセンテンスが表示されるフォームを私たちのウェブサイトにまとめることを検討しています。私はドロップダウンメニューの入力に基づいてテキストを変更する方法を知っています。しかし、特に何かが選択されている場合、どのように文全体（変数だけでなく）を変更するのですか？このようなことを達成する方法を知っていますか？

例えば（文を作るために3つの入力質問）：

1）学校名（テキストフィールド） 2）どのような最高のはあなたを説明しますか？ （ドロップダウンメニュー） Sophmore 上級 教授 修士号保持者 3）あなたは[勉強中、教えて、勉強しました]ですか？ （テキストフィールド）

「Sophmore」が選択されている場合は、プレビュー文は次のようになります。 [Sophmore] [ハーバード大学]で

を[演算]を勉強しかし、ユーザーは、それそれから、「教授」を選択した場合[ハーバード大学]教育[演算]

で [教授]そして、ユーザーが「修士ホルダー」を選択した場合、それは次のように行くだろう：：次のように行くだろう[で[数学]のため [修士ホルダー]ハーバード]

どのようにこれを実現するためのアイデアですか？

ありがとうございます！

Answer 1

このようなものが動作します。入力を一度に1つずつ監視して、文章のテキストを設定することができます。または、完全なボタンを使い、最後にそれを作成したいと思うかもしれません。どちらの方法でもコンセプトは同じです。あなたのhtmlでidを入力に割り当てます。あなたの文には、スパンをIDで使用することができます。次に、document.getElementByIdを使用して入力値を取得します。彼らが変更されると、文章を更新します。 innerHTMLを使用して、要素に新しい値を設定できます。

http://jsfiddle.net/pktMJ/

<select id="description"> 
    <option></option> 
    <option>Sophmore</option> 
    <option>Senior</option> 
    <option>Professor</option> 
</select> 
<br /> 
<input id="school" type="text" /> 
<br /> 
<input id="study" type="text" /> 
<div > 
    <span id="a"></span> at <span id="b"></span> studying <span id="c"></span>. 
</div> 

 

document.getElementById('description').onchange = function() { 

    document.getElementById('a').innerHTML = this.value; 

    var verb = ''; 
    switch (this.value) { 
    case 'Professor': 
     verb = 'teaching'; 
     break; 
    case 'Sophomore': 
     verb = 'studying'; 
     break; 
    case 'Senior': 
     verb = 'studying'; 
     break; 
    } 

    document.getElementById('d').innerHTML = verb; 
}; 

document.getElementById('school').onblur = function() { 
    document.getElementById('b').innerHTML = this.value; 
}; 

document.getElementById('study').onblur = function() { 
    document.getElementById('c').innerHTML = this.value; 
};