如何根据另一个文本框值 MVC 更改 html 输入类型？

Question

我遇到了类似的问题，但仍然无法弄清楚。

我有一个如下所示的表格。一种输入类型是隐藏的。两个文本框的值由控制器传递的模型指定。

 <form asp-action="Edit">
     //input one
     <div class="form-group" id="control1">
            <label asp-for="Value" class="control-label"></label>
            <input asp-for="Value" class="form-control" required="required" id="param2" />
            <span asp-validation-for="Value" class="text-danger"></span>
     </div>
     <input type="hidden" asp-for="Type" id="param1" />
 </form>

默认输入类型是文本框，但假设如果 asp-for="Type" 的值等于“drop”，我想将输入类型更改为下拉列表，设置为 True 或错误选项。我尝试了以下方法。我添加了新的表单组并分配了 id=control2。

       <div class="form-group" id="control2">
            <select asp-for="Value">
                <option value="True">True</option>
                <option value="False">False</option>
            </select>
        </div>

我所做的是，我使用 jquery 选择 param1 的值，如果它等于“bool”，那么我 hide control1 和 show control2 （这是错误的）。因此，即使我使用控件 2 中的下拉列表选择了值，但在 POST 发生时仍使用来自控件 1（我隐藏）的文本框值。

有人可以给我建议吗？替代方法或通过使用 control2

的值继续使用我的方法

非常感谢！

Answer 1

您可以使用razor 语法在DOM 中添加或删除元素，而不是使用jQuery。如下更新您的代码。

<form asp-action="Edit">
     //input one
	 
	 <input type="hidden" asp-for="Type" id="param1" />
	 @if(Model.Type.Equals("Drop"))
	 {
		 <div class="form-group" id="control2">
            <select asp-for="Value">
                <option value="True">True</option>
                <option value="False">False</option>
            </select>
		</div>
	 }
	 else
	 {
		<div class="form-group" id="control1">
            <label asp-for="Value" class="control-label"></label>
            <input asp-for="Value" class="form-control" required="required" id="param2" />
            <span asp-validation-for="Value" class="text-danger"></span>
		</div>
	 }
     
 </form>

如果条件为真，它将在 DOM 中添加下拉菜单，否则将附加 texbox。

希望对你有帮助。