Magento 2 : How to change UI field(s) dynamically

Question

On checkout page on country selection i want to change postal zip code from text box to select list with options dynamically ( like region_id ).

For example, if zip code are available for certain country it should show select list with all zip codes, if certain country does not have zip code it should be replaced with text box.

I am trying to achieve this using code below :

requirejs-config.js

var config = {
config: {
    mixins: {
        'Magento_Checkout/js/view/shipping-address/list': {
            'Vendor_Module/js/action/postcode-mixin': true
        }
    }
}
};

postcode-mixin.js

define([
'jquery',
], function ($) {
'use strict';

return function (ListShipping) {
    return ListShipping.extend({
        defaults: {
            template: 'Magento_Checkout/shipping-address/list',
            rendererTemplates: [],
            isExtend: true,
            testVariable: 1
        },

        initialize: function () {
            //this._super()
            //    .initChildren();

                $(document).on('change',"[name='country_id']",function(){
                   var elField = $("[name='postcode']");

                    var countryPostCodes= '{"US":["123456","67890","11221"], "CA":["A01 B0","A11 T1"]}';
                    var codeList= JSON.parse(countryPostCodes);

                    var selectedCountry = $(this).val();
                    var zipcodes= codeList[$(this).val()];

                    if(codeList.hasOwnProperty(selectedCountry)) {
                        elField.replaceWith($('<select>').attr({
                            id: elField.attr('id'),
                            name: elField.attr('name'),
                            class: elField.attr('class')
                            }));
                        $(elField).empty();
                        if(zipcodes!= 'undefined' && zipcodes.length > 0 ) {
                            for(i=0; i < zipcodes.length; i++ ) {
                                $(elField).append("<option value="+zipcodes[i]+">"+zipcodes[i]+"</option>");
                            }
                        }


                });

        }
    });
}
});

Above code replaces the input field with select field but on submit it gives error validation error and form is not being submit.

I don't know if that needs to be done using knockout js and creating html template for drop down. ( if so please guide me how to do that )

Help will be highly appreciated.