display input field with jquery

I am trying to display all values from inputs into a div. I would like my final output to look like this:

startmsg middlemsg *NAME-FROM-SELECT-MENU* endmsg *TEXT-FROM-INPUT-FIELD*

Here is my code:

<select id="names">
  <option value=""></option>
  <option value="Alex">Alex</option>
  <option value="Jeff">Jeff</option>
  <option value="Amy">Amy</option>
  <option value="Kat开发者_运维问答e">Kate</option>
</select>
<input id="message" type="text" />
<input id="clear" type="submit" value="Clear" />
<div id="display"></div>


$('#names')('#message').keyup(function () {
  $('#display').append('starmsg').append('middlemsg').text($(this).val().append('endmsg'));
});

---

I reckon your code isn't too far away. You want the multiple selector, and probably also the change event rather than keyup. You also need to call append on jQuery objects, rather than strings:

$('#names, #message').change(function () {
    $('#display')
        .text('startmsg ')
        .append(' middlemsg ')
        .append($('#names').val())
        .append(' endmsg ')
        .append($('#message').val());
});

---

Since you are using jQuery, i would suggest .each on the the input and select tags

See the following link for more info, it does exactly the thing you want.

jQuery .each

---

is this what you are after http://jsfiddle.net/DUytH/

function update(){
  $('#display')
        .text('start ' +
              $('#message').val() +
              ' end ' +
              $('#names').val());  
}
$('#message').keyup(update);
$('#names').change(update);