javascript - 从多个输入字段填充字段？

Question

我正在尝试用街道地址、城市、州和邮政编码填充一个字段，但现在当我在每个字段中输入数据时，它会替换最后一个。

$("#trainer_address").keyup( function () {
        $('#location').val($(this).val());
    });

    $("#trainer_city").keyup( function () {
        $('#location').val($(this).val());
    });

    $("#trainer_state").keyup( function () {
        $('#location').val($(this).val());
    });

    $("#trainer_zip").keyup( function () {
        $('#location').val($(this).val());
    });

我如何让它保持以前的值，然后添加下一个值，这样我就可以得到类似 402 StreetAddress City State, 12345 的内容？

Answer 1

此脚本将执行此操作:

var $loc = $('#location'),
    address = [],

getAddress = function() {
    var str = address.slice(0, 3).join(' ') + ', ' + (address[3] || '');
    return str.replace(/\s+/g, ' ').replace(/,\s$/, '');
}

$("#trainer_address, #trainer_city, #trainer_state, #trainer_zip").on({
    focus: function() {
        $loc.val(getAddress());
    },
    keyup: function() {
        address[$(this).index()] = $(this).val();
        $(this).trigger('focus');
    }
});

http://jsfiddle.net/J6G9f/1/

脚本还可以正确处理删除部分地址并自动更新结果。