I think you should Use onchange Test this code:

function onChangeDiv(divId, element)
{
    document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}

<select name="frm_select" onchange="onChangeDiv('result', this)">
   <option value="1">show</option>
   <option value="0">hidden</option>
</select>
<div id="result">This is a div</div>

You can use simple css style to show hide given div on value in model.NumberofEngines

<div style="display: @(model.NumberofEngines == "1"  ? "block" : "none");">
    ONE
</div>

Here is complete code

<EditForm>
    <label>Number of engines:</label>
    <InputSelect style="width: 25%" @bind-Value="model.NumberofEngines" class="form-control">
                    <option value="">-- Select the number of engines --</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
    </InputSelect>
</EditForm>


<div style="display: @(model.NumberofEngines == "1"  ? "block" : "none");">
    ONE
</div>


<div style="display: @(model.NumberofEngines == "2"  ? "block" : "none");">
    TWO
</div>

<div style="display: @(model.NumberofEngines == "3"  ? "block" : "none");">
    THREE
</div>

<div style="display: @(model.NumberofEngines == "4"  ? "block" : "none");">
    FOUR
</div>

Alternatively you can use css class also to show hide given div

The previous answers work sure.

From a coding perspective Blazor rendors the dom it does not manipulate the dom.

The problems with the javascript/css aproach in a blazor app are:

• You have to set up the javascript.
• You render stuff into the dom that does not need to be there. This has runtime costs in both Blazor and the Browser. If the "Configurations" use components or have blazor logic they are all going to be instanced/bindings configured ect. even if "hidden".

A Blazor C# way to do this is:

@page "/"
@using static Index.CarEngines

<PageTitle>Index</PageTitle>

<EditForm Model=@model >
    <InputSelect @bind-Value=model.Engines >
        <option value=@One >One</option>
        <option value=@Two >Two</option>
        <option value=@Three >Three</option>
        <option value=@Four >Four</option>
    </InputSelect>
</EditForm>

@switch (model.Engines)
{
    case One:
        <div>One Engine Configuration</div>
        break;
    case Two:
        <div>Two Engine Configuration</div>
        break;
    case Three:
        <div>Three Engine Configuration</div>
        break;
    case Four:
        <div>Four Engine Configuration</div>
        break;
}
@code {

    SomeModel model = new();

    public class SomeModel 
    {
        public CarEngines Engines { get; set; } = One;
    }

    public enum CarEngines
    {
        One = 1,
        Two,
        Three,
        Four
    }
}

Run this and compare what is in the dom...

Obviously the configuration html inside each case block will add complexity, break these out into separate blazor components. This design will make that a lot simpler as well.