Question

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

例如（构成句子的3个输入问题）：

1）学校名称（文本字段） 2）最能描述你的是什么？（下拉式菜单） Sophmore 前辈教授硕士学位持有人 3）你在学习，教学，学习过什么？（文本字段）

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

但如果用户选择'教授'，那么它会像这样： [教授]在[哈佛]教学[数学]

如果用户选择“Masters Degree Holder”，它将如下所示： [哈佛大学] [数学]的[硕士学位持有人]

关于如何实现这一目标的任何想法？

谢谢！

Answer 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;
};

基于表单字段更改的文本

1 个答案: