Replace shipping method radio buttons with select control

I am trying to replace radio buttons for shipping methods with select control. I have the following code

@model CheckoutShippingMethodModel
<div class="checkout-data">
    <div class="section shipping-method">
        @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.OpCheckoutShippingMethodTop })
        @if (Model.Warnings.Count == 0)
        {
            <select class="address-select form-control custom-select" title="" >
                @for (var i = 0; i < Model.ShippingMethods.Count; i++)
                {
                    var shippingMethod = Model.ShippingMethods[i];

                    <option value="@(shippingMethod.Name)___@(shippingMethod.ShippingRateComputationMethodSystemName)">
                        @T("Checkout.SelectShippingMethod.MethodAndFee", shippingMethod.Name, shippingMethod.Fee)
                    </option>
                }
            </select>
        }
        else
        {
            <div class="message-error alert alert-danger">
                <ul>
                    @foreach (var warning in Model.Warnings)
                    {
                        <li>@warning</li>
                    }
                </ul>
            </div>
        }
        @await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.OpCheckoutShippingMethodBottom })
    </div>
</div>

When I click Continue I get a popup saying "Your order cannot be completed at this time as there is no shipping methods available for it. Please make necessary changes in your shipping address."

What am I doing wrong?

Thanks in advance

looks like you're missing the "id" in your <select> so the validate function in public.onepagecheckout.js has no way to identify the selected option:

            <select name="shippingoption" id="shippingoption" class="address-select"
                    title="">
                @for (var i = 0; i < Model.ShippingMethods.Count; i++)
                {
                    var shippingMethod = Model.ShippingMethods[i];
                    <option value="@(shippingMethod.Name)___@(shippingMethod.ShippingRateComputationMethodSystemName)"
                            shippingDetails="@Html.Raw(shippingMethod.Description)">
                        @T("Checkout.SelectShippingMethod.MethodAndFee", shippingMethod.Name, shippingMethod.Fee)
                    </option>
                }
            </select>

you're seeing line 281 in public.onepagecheckout.js

Thanks for your reply. I copied paste your code and I get "Please specify shipping method"

Hit F12 to open up your browser's devtools and set a breakpoint on for (var i = 0; i< methods.length; i++) in public.onepagecheckout.js

You're reaching the alert after the loop, so "methods" has a length but you'll need to see why the selection isn't getting detected  (2nd code block below).

Also note that I'm sending my shippingDetails to the server for a different function, so try making your <option> like you had it above:

<option value="@(shippingMethod.Name)___@(shippingMethod.ShippingRateComputationMethodSystemName)">
                        @T("Checkout.SelectShippingMethod.MethodAndFee", shippingMethod.Name, shippingMethod.Fee)
                    </option>

var ShippingMethod = {
    form: false,
    saveUrl: false,

    init: function (form, saveUrl) {
        this.form = form;
        this.saveUrl = saveUrl;
    },

    validate: function () {
        var methods = document.getElementsByName('shippingoption');
        if (methods.length==0) {
            alert('Your order cannot be completed at this time as there is no shipping methods available for it. Please make necessary changes in your shipping address.');
            return false;
        }

breakpoint=>        for (var i = 0; i< methods.length; i++) {
            if (methods[i].checked ||
                methods[i].options[methods[i].selectedIndex].value) {
                return true;
            }
        }
        alert('Please specify shipping method.');
        return false;
    },