Question

我有一个文本字段，我想根据输入放在此文本字段信息下面。例如，假设有人输入abc，那么我想在文本字段下面写一些文字来说foo_abc。 jquery是完成这样的事情的最好方法吗？此外，我在文本字段上方有一个下拉列表，并希望根据所选内容在文本字段下将信息附加到此标签。这可能吗？

Answer 1

阅读javascript活动http://www.w3schools.com/js/js_events.asp

一旦熟悉了基础知识，请阅读jquery以使您的生活更轻松。

Answer 2

你不需要jQuery来做只是这个，所以这里你使用简单的JavaScript：

<script>        
    // Just an easier way to get an 
    // element by id in the document.
    function $get(id) {
        return document.getElementById(id);
    }    

    // This is what's called whenever
    // the user types into the input
    // box or changes the select value
    function config(event) {
       var prepend = "foo_",
           msgbox = $get("msgbox"),
           input = $get("input"),
           append = $get("selector");

        // Just a shorthand for an "if(){}else{}" 
        // statement. If input is blank, don't do
        // anything but clear the msgbox.
        (input.value) ? msgbox.innerHTML = prepend + input.value + append.value :
        msgbox.innerHTML = "";

    }    

    // Although this should probably
    // be at the top, it's better if
    // we declare everything before
    // we try to call them. ;)
    window.onload = function(event) {  
        // On load of the window, lets add
        // event listeners to our input
        // and selector box.

        // Input
        this.input = $get("input");
        this.input.addEventListener('change', config, false);
        this.input.addEventListener('keyup', config, false);

        // Selector
        this.append = $get("selector");
        this.append.addEventListener('change', config, false);
    }
</script>

<div id="container">
    <input id='input' value=""/>
    <select id="selector">
        <option value="_bar1">_bar1</option>
        <option value="_bar2">_bar2</option>
        <option value="_bar3">_bar3</option>
    </select>
    <div id="msgbox"></div>
</div>

- ＆GT; example＆lt; -

Answer 3

这可以使用或不使用jQuery来完成。像jQuery这样的JS框架使您的代码更简洁，更短，以完成您所指的任务。但是如果没有它，您可以使用文本字段的“onkeyup”事件来触发更新文本字段下的文本的JS函数。此外，下拉框的“onchange”事件也是如此。 document.getElementById（）允许您通过标记的id属性直接获取文档中的元素。

Answer 4

我编写了一个例子。看看这里：http://jsfiddle.net/3Ys6f/

我建议你阅读jQuery文档，有很多例子

根据值在文本框下添加文本

4 个答案:

- ＆GT; example＆lt; -