基於表單域進行更改的文本

我期待在我們的網站上放置一個基於一系列輸入框和下拉菜單的預覽句的表單。我知道如何根據下拉菜單的輸入來更改文本。但是，如果選擇了特別的東西，你如何改變整個句子（而不僅僅是變量）？你知道如何完成這樣的事情嗎？基於表單域進行更改的文本

例如（3點輸入的問題，以最多的一句話）：

1）學校名稱（文本字段） 2）什麼最能形容你？（下拉菜單）索菲莫爾高級教授碩士學位 3）你是什麼[學習，教學，學習]？（文本字段）

如果選擇「Sophmore」，預覽句子應該是這樣的： [Sophmore]在[哈佛]研究[數學]

但是，如果用戶選擇「教授」，那麼它會是這樣的： [教授]在[哈佛]教[數學]

而如果用戶選擇「碩士學歷」，它會是這樣的： [碩士學位持有人]爲[數學]在[哈佛]

關於如何做到這一點的任何想法？

謝謝！

來源

2012-02-08 Donny

像這樣的東西會奏效。您可以一次監控一個輸入並設置句子的文本。或者你可能想要使用一個完整的按鈕，並在最後建立它。無論哪種方式，概念都是一樣的。在你的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; 
};

來源

2012-02-08 05:47:06 mrtsherman

謝謝！雖然我的問題是，如果選擇某個菜單選項，如何更改整個句子結構？如果選擇'教授'而不是'高級'，則句子會變成「人是教學主體」而不是「人是學習主體」。 – Donny 2012-02-08 06:17:30

@Donny - 你可以使用select語句 - http://jsfiddle.net/pktMJ/2/ – mrtsherman 2012-02-08 06:29:04

基於表單域進行更改的文本

回答

相關問題