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);
精彩评论