开发者

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);
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜