Я использую следующую функцию Javascript для отображения элементов при нажатии кнопки.

function showDiv() {
document.getElementById('myDIV').style.display = "block"; }

Я вызываю эту функцию на кнопке с

@onclick=showDiv

Я хотел бы сделать то же самое, но в списке InputSelect. Я пробовал это, но это не работает

<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>1</option>
                    <option @onclick=ShowDiv>2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
</InputSelect>

Идея заключается в калькуляторе, который рассчитывает выбросы корабля, и пользователь должен выбрать количество двигателей, которые есть на корабле, и приложение должно показать необходимые входные данные.

1
Nikolas Kypri 3 Фев 2022 в 12:35
Чтобы уточнить: вы хотите показать другой набор параметров на основе значения, выбранного в <InputSelect .... Если они нажмут на 2 двигателя, под выбором ввода появятся разные параметры «2 двигателя»?
 – 
Brian Parker
3 Фев 2022 в 12:46
Да. Например, если он выбирает 3 двигателя, то три текстовых поля для скорости двигателя 1, скорости двигателя 2, скорости двигателя 3 и трех других текстовых полей для производства двигателя 1, производства двигателя 2, производства двигателя 3 и так далее.
 – 
Nikolas Kypri
3 Фев 2022 в 12:51

2 ответа

Я думаю, вы должны использовать onchange Test этот код:

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>
1
Mahdi Saeidi 3 Фев 2022 в 12:51
Это не работает с InputSelect. Только с Селектом. Как показать несколько вариантов? 4 варианта, и каждый из них показывает разные div?
 – 
Nikolas Kypri
3 Фев 2022 в 13:05

Вы можете использовать простой стиль css, чтобы скрыть данный div по значению в модели.NumberofEngines

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

Вот полный код

<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>

В качестве альтернативы вы можете использовать класс css также, чтобы показать скрытие данного div

0
Surinder Singh 3 Фев 2022 в 14:06
Спасибо за помощь! Я получаю следующую ошибку: InvalidOperationException: Microsoft.AspNetCore.Components.Forms.InputSelect1[System.String] requires a cascading parameter of type EditContext. For example, you can use Microsoft.AspNetCore.Components.Forms.InputSelect1[[System.String, System.Private.CoreLib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]] внутри EditForm. У меня есть Numberofengines в виде строки
 – 
Nikolas Kypri
3 Фев 2022 в 14:03
Плохо, я обновил свой ответ, попробуйте, и ваша модель должна иметь это свойство в виде строки NumberofEngines.
 – 
Surinder Singh
3 Фев 2022 в 14:06