javascript - 根据表单字段更改的文本

Question

我希望在我们的网站上制作一个表单，其中包含基于一系列输入框和下拉菜单的预览句子。我知道如何根据下拉菜单的输入更改文本。但是，如果选择了特定的内容，如何更改整个句子(而不仅仅是变量)？你知道如何完成这样的事情吗？

例如(输入3个问题组成一个句子):

1) 学校名称(文本字段) 2) 最能描述您的是什么？ (下拉式菜单) 大二 高级的 教授 硕士学位持有者 3) 你在[学习、教学、研究过]什么？ (文本字段)

如果选择“Sophmore”，预览句子应如下所示: [大二]在[哈佛大学]学习[数学]

但是如果用户选择“教授”，那么它会像这样: [哈佛]的[教授]教授[数学]

如果用户选择“硕士学位持有者”，则会如下所示: [哈佛大学][数学][硕士学位持有者]

关于如何实现这一点有什么想法吗？

谢谢!

Answer 1

像这样的东西会起作用。您可以一次监控一个输入并设置句子的文本。或者您可能想使用一个完整的按钮并在最后构建它。无论哪种方式，概念都是相同的。在你的 html 中为输入分配 id。对于你的句子，你可以使用带有 id 的 span。然后使用 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;
};