签出时更改Magento2地址列表

我在

Magento\u NegotiableQuote/web/js/view/shipping address/list.js

define([

    'jquery',
    'ko',
    'underscore',
    'mageUtils',
    'uiLayout',
    'Magento_Checkout/js/view/shipping-address/list',
    'Magento_Customer/js/model/address-list',
    './address-renderer/address',
    'mage/translate',
    'select2',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/checkout-data',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Customer/js/model/customer',
], function (
    $,
    ko,
     _, 
     utils, 
     layout, 
     ListView, 
     addressList, 
     AddressModel,
     $t,
     quote,
     checkoutData,
     createShippingAddress,
     selectedShippingAddress,
     customer,
     ) {
    'use strict';

    var defaultRendererTemplate = {
        parent: '${ $.$data.parentName }',
        name: '${ $.$data.name }',
        component: 'Magento_NegotiableQuote/js/view/shipping-address/address-renderer/default'
    },
    popUp = null,

    newShippingAddressOption = {
        getAddressInline: function () {
            return $t('New Address');
        },
        customerAddressId: null
    },

    shippingAddressOptions = addressList().filter(function (address) {
        return address.getType() == 'customer-address';
    });

    shippingAddressOptions.push(newShippingAddressOption);

    return ListView.extend({
        defaults: {
            template: 'Magento_NegotiableQuote/shipping-address/list'
        },

        shippingAddressOptions: shippingAddressOptions,
        /** @inheritdoc */
        initChildren: function () {
            if (!checkoutConfig.isAddressInAddressBook && checkoutConfig.quoteShippingAddress) {
                addressList.push(new AddressModel(checkoutConfig.quoteShippingAddress));
                this.visible = true;
            }
            _.each(addressList(), this.createRendererComponent, this);
            return this;
        },
        initialize: function () {
            var self = this;
            this._super()
            .observe({
                selectedShippingAddress: null,
                isShippingAddressFormVisible: !customer.isLoggedIn() || shippingAddressOptions.length == 1
            });
            return this;
        },


        /**
         * @param {Object} address
         * @return {*}
         */
        shippingAddressOptionsText: function (address) {
            return address.getAddressInline();
        },

        /**
         * @param {Object} address
         */
        onShippingAddressChange: function (address) {
            this.isShippingAddressFormVisible(address == newShippingAddressOption); //eslint-disable-line eqeqeq
        },
        /**
         * Create new component that will render given address in the address list.
         *
         * @param {Object} address
         * @param {*} index
         */
        createRendererComponent: function (address, index) {
            var rendererTemplate, templateData, rendererComponent;

            if (index in this.rendererComponents) {
                this.rendererComponents[index].address(address);
            } else {
                // rendererTemplates are provided via layout
                rendererTemplate = address.getType() !== undefined &&
                this.rendererTemplates[address.getType()] !== undefined ?
                    utils.extend({}, defaultRendererTemplate, this.rendererTemplates[address.getType()])
                    : defaultRendererTemplate;
                templateData = {
                    parentName: this.name,
                    name: index
                };
                rendererComponent = utils.template(rendererTemplate, templateData);
                utils.extend(rendererComponent, {
                    address: ko.observable(address)
                });
                rendererComponent = utils.template(rendererTemplate, templateData);
                utils.extend(rendererComponent, {
                    address: ko.observable(address)
                });
                layout([rendererComponent]);
                this.rendererComponents[index] = rendererComponent;
            }
        },


        updateShippingAddress: function () {
            if (this.selectedShippingAddress() && this.selectedShippingAddress() != newAddressOption) {
                selectShippingAddress(this.selectedShippingAddress());
                checkoutData.setSelectedShippingAddress(this.selectedShippingAddress().getKey());
                //  this.isShippingMethodFormVisible(true);
            } else {
                this.source.set('params.invalid', false);
                this.source.trigger('shippingAddress.data.validate');

                if (!this.source.get('params.invalid')) {
                    var addressData = this.source.get('shippingAddress');
                    // if user clicked the checkbox, its value is true or false. Need to convert.
                    addressData.save_in_address_book = this.saveInAddressBook ? 1 : 0;

                    // New address must be selected as a shipping address
                    var newShippingAddress = createShippingAddress(addressData);
                    selectShippingAddress(newShippingAddress);
                    checkoutData.setSelectedShippingAddress(newShippingAddress.getKey());
                    checkoutData.setNewCustomerShippingAddress(addressData);
                    //this.isShippingMethodFormVisible(true);
                    }
                }
            },
        /**
         * Added Select2 to dropdown
         */
        selectTwo:function(){
            $('select').select2({
                theme: "classic"
            });
        },
    });
});

Magento\u NegotiableQuote/web/template/shipping address/list.html

<div class="field addresses">
    <div class="control">
        <div class="shipping-address-items">
            <select class="select2" name="billing_address_id" data-bind="
        options: shippingAddressOptions,
        optionsText: shippingAddressOptionsText,
        value: selectedShippingAddress,
        event: {change: onShippingAddressChange(selectedShippingAddress())};"
        afterRender="selectTwo()"></select>
        </div>
    </div>
</div>

能够将地址列表更改为下拉选择，但是，我希望有这样的输出

感谢您的帮助，选择地址后如何添加操作？我是一个新的敲出js有什么办法，我可以显示地址框后，我选择了下拉列表中的地址