Magento 2.1. How to display select box instead of box in checkout shipping address?

Question

As checkout page layout is mostly build in knockout.js and I have zero knowledge of knockout.js.

I want to show shipping address in select box <select> instead of Box (ref to image - section 1) on the checkout page.

In Billing address it is showing as select box (ref to image - section 2), but I want same display for shipping address.

any help is appreciable.

Answer 1

You have to override

module_checkout/view/frontend/web/template/shipping-address/list.html

or

module_checkout/view/frontend/web/template/shipping-address/address-renderer/default.html

list.html

<!-- ko if: (visible)-->
<div class="field addresses">
  <div class="control">
    <select>
        <!-- ko foreach: { data: elems, as: 'element' } -->
        <!-- ko template: element.getTemplate() --><!-- /ko -->
        <!-- /ko -->
    </select>
  </div>
</div>
<!-- /ko -->

or default.html

<option>
  <!-- ko text: address().firstname --><!-- /ko --> <!-- ko text: address().lastname --><!-- /ko --><br/>
  <!-- ko text: address().street --><!-- /ko --><br/>
  <!-- ko text: address().city --><!-- /ko -->, <!-- ko text: address().region --><!-- /ko --> <!-- ko text: address().postcode --><!-- /ko --><br/>
  <!-- ko text: getCountryName(address().countryId) --><!-- /ko --><br/>
  <!-- ko text: address().telephone --><!-- /ko --><br/>
</option>

this will display you an shipping address in dropdown, but i don't about how to set selection event for shipping address as of billing address, for that may be you have to look at module-checkout/view/frontend/web/template/billing-address/list.html or module-checkout/view/frontend/web/js/view/billing-address.js