從多個輸入字段填充字段？

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/

腳本還可以正確處理地址的部分刪除，並自動更新結果。

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

使用+運算符將舊值與新值連接起來...可以避免使用多個選擇器的多重鍵入功能....

嘗試這個

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