jQuery 如何将 shipping address 复制到 billing address

2026-10-24数据阿明

结论

直接读取 shipping state <select> 的值，再用 .val() 赋给 billing state：

$('#bstate').val($('#state').val());

两个 <select> 中，同一个州对应的 <option value="..."> 必须一致。

完整写法

监听复选框的 change 事件，并用 .prop('checked') 获取当前选中状态：

$(function () {
    $('#same').on('change', function () {
        if ($(this).prop('checked')) {
            $('#bfName').val($('#fName').val());
            $('#blName').val($('#lName').val());
            $('#baddress1').val($('#address1').val());
            $('#baddress2').val($('#address2').val());
            $('#bcity').val($('#city').val());
            $('#bstate').val($('#state').val());
            $('#bzip').val($('#zip').val());
        }
    });
});

这段代码假设：

shipping state 的 ID 是 state
billing state 的 ID 是 bstate

HTML 示例

两个下拉框应使用相同的 value：

<select id="state" name="state">
    <option value="">None</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
</select>

<select id="bstate" name="bstate">
    <option value="">None</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
</select>

假设 shipping state 当前选中：

<option value="CA">California</option>

执行以下代码后，billing state 中 value="CA" 的选项也会被选中：

$('#bstate').val($('#state').val());

这里不用写 option:selected。对于 <select>，直接调用 .val() 就能获取当前选中项的值。

需要触发联动逻辑时

如果 billing state 绑定了 change 事件，或者所用的下拉框插件依赖该事件，可以在赋值后手动触发：

$('#bstate')
    .val($('#state').val())
    .trigger('change');

普通的原生 <select> 通常不需要触发这个事件。

注意事项

不要这样判断复选框状态：

$('#same').attr('checked')

checked 会随用户操作变化，应通过以下任一种方式读取当前状态：

$(this).prop('checked')

或者：

this.checked

如果 billing state 中没有与 shipping state 相同的 value，.val() 就无法选中对应选项。因此，两个下拉框应使用同一套州代码，不能只保证显示文字相同。