重构keyup函数

Question

我正在试着做一个表单预览器。

这个想法是制作一个显示用户信息的层，默认情况下打印在div上，但可以实时修改他们的数据并将其显示在框中。

我的代码可以工作，但我不知道如何简化它。

下面是我的代码：

​

function preview() {
    $('#previewName').html($('#Name').val());
    $('#Name').keyup(function () {
        $('#previewName').html($(this).val());
    });
    $('#previewDirection').html($('#Direction').val());
    $('#Direction').keyup(function () {
        $('#previewDirection').html($(this).val());
    });
    $('#previewPostal').html($('#Postal').val());
    $('#Postal').keyup(function () {
        $('#previewPostal').html($(this).val());
    });
    $('#previewCountry').html($('#Country option:selected').text());
    $('#Country option:selected').change(function () {
        $('#previewCountry').text($(this).text());
    });
}

<form id="form">
    <div>
        <div>
            <label>Name</label>
            <input type="text" id="Name" name="Name" value="">
        </div>

        <div>
            <label>Direction</label>
            <input type="text" id="Direction" name="Direction">
        </div>

        <div>
            <label>Postal</label>
            <input type="text" id="Postal" name="Postal">
        </div>

        <div>
            <label>Country</label>
            <div>
                <select name="Country" id="Country">
                    <option value="">x</option>
                    <option value="">y</option>
                </select>
            </div>
        </div>
    </div>
    <div>
        <div class="box">
            <p class="strong" id="previewName"></p>
            <p class="mb0" id="previewDirection"></p>
            <p id="previewPostal"></p>
            <p id="previewCountry"></p>
        </div>
    </div>
</form>

​

有什么想法吗？