如何根据另一个文本框值 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 或 False 选项的下拉列表。我尝试了以下内容。我添加了新的表单组并分配了 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 select param1 的值，如果它等于 "bool" 那么我隐藏 control1 和 show control2（这是错误的）。因此，即使我使用控件 2 的下拉列表 select 编辑了值，当 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 中添加下拉列表，否则它将附加文本框。

希望对您有所帮助。

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

How to change html input type based on another text box value MVC?

javascript

model-view-controller

jquery

razor-pages