Adding Text under textbox based on value

I have a text field and I want to put underneath this text field information based on the input. For example, lets say someone types abc, then I would like some text underneat开发者_如何学运维h the text field to say foo_abc. Is jquery the best way to accomplish something like this? Also, I have a drop down above the text field and would like to append information to this label under the text field based on what is selected. Is this possible?

---

read up on javascript events http://www.w3schools.com/js/js_events.asp

Once you are comfortable with the basics, then read up on jquery to make your life easier.

---

You don't need jQuery to do just this, so here you go with plain 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>

--> example <--

---

This can be done with or without jQuery. A JS framework like jQuery makes your code a little neater and shorter to accomplish tasks like the one you're referring to. But without it you can use the "onkeyup" event of the text field to trigger a JS function that updates the text under the text field. Also, the "onchange" event of the dropdown box to do the same. The document.getElementById() allows you to directly grab a element in the document by the id attribute of the tag.

---

I coded up an example. Take a look here: http://jsfiddle.net/3Ys6f/

I would recommend you reading the jQuery documentation, there are lots of examples