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

时间:2011-02-15 16:09:12

标签: javascript jquery

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

4 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

你不需要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; -

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

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

相关问题