jQuery merging select field and text input values in real time to another text field

I have a three field form. I'd like the third field (text box) to display a combination of the first two fields ... one being a select field and the other being a text field; these values separated with a space. I have tried the following with little success.

<form>
    <select name="val1" id="val1">
        <option value="">Select a value</option>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
    </select>
    <input name="val2" id="val2" />
    <input name="val3" id="val3" />
</form>
<script>
    $('#val1, #val2').keyup(function(){ $('#val3').val($('#val1').val()+' '+$('#val2').val()); });
<script>

What I'm expecting is when a user selects an option from the select field, is value would appear in the third form field and when a user types something in the second field, its value would also appear in the third field separated with a space. This would all happen in real time. Oddly enough, the jQuery code does nothing in all browsers.

Maybe something to do with the keyup() function as a select field is using the mouse only. But even if I ignore the select field and type something in the second field, it should appear in the third field alone, but it doesn't.