Question

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

$("#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/

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

Answer 2

那是因为你要覆盖它。尝试连接：

$('#location').val($('#location').val() + $(this).val());

例如，更改此内容：

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

到此：

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

为每个keyup()事件函数

执行此操作

Answer 3

使用+运算符将旧val连接到新的val ...并且您可以使用多个选择器来避免多个keyup函数....

试试这个

$("#trainer_address,#trainer_city,#trainer_state,#trainer_zip").keyup( function () {
  var location=$('#location').val();
  $('#location').val(location + $(this).val());
});

Answer 4

您可以像这样使用原生value：

$('#location')[0].value += this.value;

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

4 个答案: