Javascript 选择下拉列表值会显示一个文本框，但不会显示'；t存储传入的值

我的观点包含

        <div class="col-md-3 ">
            @{
                List<SelectListItem> deformitylevel = new List<SelectListItem>();
                deformitylevel.Add(new SelectListItem { Value = "hip", Text = "Hip" });
                deformitylevel.Add(new SelectListItem { Value = "knee", Text = "Knee" });
                deformitylevel.Add(new SelectListItem { Value = "ankle", Text = "Ankle" });
                deformitylevel.Add(new SelectListItem { Value = "other", Text = "Other" });
            }
                @Html.DropDownListFor(model => model.DeformityLevel, deformitylevel, "--Select Level -", new { @class = "form-control", @onchange = "showdeformitytextbox()", id = "deformitydropdown" })
                @Html.ValidationMessageFor(model => model.DeformityLevel, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-3">
            @Html.EditorFor(model => model.DeformityLevel, new { htmlattributes = new { @class = "form-control", id = "deformitytextbox" ,style= "display:none"} })
        </div>

当我在dropdownlist中选择“Other”时，它将在数据库中存储“Other”，而不是存储在@Html.EditorFor中输入的值

---

我忘了什么帮助

我会更改当前控件的名称，并为deformtylevel创建一个隐藏的表单元素。然后根据DropdownList和textbox更改事件在javascript中设置其值

***类似于此（jq未经验证，仅用于说明）

$（文档）.ready（函数（）{
$（'#deformtylevel_DDL'）。更改（函数（）{
如果（$（this.val（）！='other'）{
$（'#deformtylevel'）.val（this.val（））；
}
});
$（'#deformtylevel_TB'）。on（'change'，function（）{
$（'#deformtylevel'）.val（$（this.val（））；
});
});

我会更改当前控件的名称，并为变形级别创建一个隐藏的表单元素。然后根据DropdownList和textbox更改事件在javascript中设置其值

***类似于此（jq未经验证，仅用于说明）

$（文档）.ready（函数（）{
$（'#deformtylevel_DDL'）。更改（函数（）{
如果（$（this.val（）！='other'）{
$（'#deformtylevel'）.val（this.val（））；
}
});
$（'#deformtylevel_TB'）。on（'change'，function（）{
$（'#deformtylevel'）.val（$（this.val（））；
});
});

好的，您的函数只显示

#变形文本框

输入，当输入的值发生变化时，您还应该更新模型属性。

---

如果表单在选择您应该使用的更改时自动提交。

那么，您的函数仅显示

#变形文本框

输入，当在其中输入的值更改时，您还应该更新模型属性。

---

如果表单在选择您应该使用的更改时自动提交。

请使用文本框立即尝试，您的htmlAttributes参数不正确。尝试：

<div class="col-md-3 ">

        @Html.DropDownList("DeformityLevel", deformitylevel, "--Select Level -", new { @class = "form-control", @onchange = "showdeformitytextbox()", id = "deformitydropdown" })
        @Html.ValidationMessage("DeformityLevel", "", new { @class = "text-danger" })
    </div>
    <div class="col-md-3">
        @Html.TextBox("DeformityLevel", null, new { @class = "form-control", id = "deformitytextbox", style = "display:none;" })
    </div> 

    <script>
        function showdeformitytextbox() {
            if ($("#deformitydropdown option:selected").text() == 'Other') {
                $("#deformitytextbox").show();

            }
            else {
                $("#deformitytextbox").hide();
            }
        }
    </script>

@DropDownList（“变形水平”，变形水平，“--Select Level-”，新的{@class=“form control”，@onchange=“showmotformitytextbox（）”，id=“变形水平”}）
@Html.ValidationMessage（“变形级别”，new{@class=“text danger”}）
@TextBox（“deformityvel”，null，新的{@class=“form control”，id=“deformitytextbox”，style=“display:none；”）
函数showDeformationTextBox（）{
if（$（“#变形下拉选项：选中”）.text（）==‘其他’）{
$（“#变形文本框”）.show（）；
}
否则{
$（“#变形文本框”）.hide（）；
}
}

立即使用文本框进行尝试，您的htmlAttributes参数不正确。尝试：

<div class="col-md-3 ">

        @Html.DropDownList("DeformityLevel", deformitylevel, "--Select Level -", new { @class = "form-control", @onchange = "showdeformitytextbox()", id = "deformitydropdown" })
        @Html.ValidationMessage("DeformityLevel", "", new { @class = "text-danger" })
    </div>
    <div class="col-md-3">
        @Html.TextBox("DeformityLevel", null, new { @class = "form-control", id = "deformitytextbox", style = "display:none;" })
    </div> 

    <script>
        function showdeformitytextbox() {
            if ($("#deformitydropdown option:selected").text() == 'Other') {
                $("#deformitytextbox").show();

            }
            else {
                $("#deformitytextbox").hide();
            }
        }
    </script>

@DropDownList（“变形水平”，变形水平，“--Select Level-”，新的{@class=“form control”，@onchange=“showmotformitytextbox（）”，id=“变形水平”}）
@Html.ValidationMessage（“变形级别”，new{@class=“text danger”}）
@TextBox（“deformityvel”，null，新的{@class=“form control”，id=“deformitytextbox”，style=“display:none；”）
函数showDeformationTextBox（）{
if（$（“#变形下拉选项：选中”）.text（）==‘其他’）{
$（“#变形文本框”）.show（）；
}
否则{
$（“#变形文本框”）.hide（）；
}
}

正如其他人所提到的，为了使这更干净，最好将下拉列表和文本框的模型字段分开。即使您使用下面的代码让它工作，如果您必须在选择其他值的情况下返回页面，也会导致更多的工作。也就是说，以下内容确实在文本框中提交了预期值。关键概念是在提交时将下拉列表设置为禁用

假设您的表单id为

submitForm

，具体如下：

@using (Html.BeginForm("someActionName", "someControllerName", FormMethod.Post, new { @id="submitForm"}))

然后，以下代码将通过拦截表单提交来确保下拉列表不会提交其值：

   $("#submitForm").submit(function () {
      if ($("#deformitydropdown option:selected").text() === "Other") {
         $("#deformitydropdown").attr("disabled", true);
      } else {
         $("#deformitydropdown").removeAttr("disabled");
      }
   });

---

正如其他人所提到的，为了使它更干净，最好将下拉列表和文本框的模型字段分开。即使您使用下面的代码让它工作，如果您必须在选择其他值的情况下返回页面，也会导致更多的工作。也就是说，以下内容确实在文本框中提交了预期值。关键概念是在提交时将下拉列表设置为禁用

假设您的表单id为

submitForm

，具体如下：

@using (Html.BeginForm("someActionName", "someControllerName", FormMethod.Post, new { @id="submitForm"}))

然后，以下代码将通过拦截表单提交来确保下拉列表不会提交其值：

   $("#submitForm").submit(function () {
      if ($("#deformitydropdown option:selected").text() === "Other") {
         $("#deformitydropdown").attr("disabled", true);
      } else {
         $("#deformitydropdown").removeAttr("disabled");
      }
   });

---

您需要采取一些措施来防止下拉列表提交其变形级别的值。由于您对下拉列表和文本框使用相同的模型属性，并且您没有做任何事情来隐藏下拉列表，因此它将在下拉列表中提交值作为模型的预期值。DeformityLevel@stephen.vakil我试着隐藏掉下来的东西，同样的结果。你需要做一些事情来防止下拉列表提交它的值。由于您对下拉列表和文本框使用相同的模型属性，并且您没有做任何事情来隐藏下拉列表，因此它将在下拉列表中提交值作为模型的预期值。DeformityLevel@stephen.vakil我试着隐藏掉下来的东西，相同的结果。如果您不愿意更改模型或控制器代码，这是一种方法。如果您不愿意更改模型或控制器代码，这是一种方法。是的，这是一个比我的更好的选择