HTML 下拉列表 - 整理好了吗？

Question

我已经实现了一个 html 下拉列表，一切似乎都很好，只是想整理一下：

1) 当订单屏幕加载时，“选择”作为下拉菜单中的初始选项出现。当用户单击下拉菜单时，仍然会出现“选择”。我想在选择下拉列表时隐藏“选择”，我缺少视图中的某些选项？

2) 验证方面，在从下拉菜单中选择一个选项之前，我无法下订单。这很好，但是在我使用文本框并收到一个漂亮的大红色错误消息之前，现在我什么也没得到，如何通知用户必须选择一个选项？

<div class="editor-field">
@Html.DropDownListFor(x => x.Selected_BicycleModelId, Model.BicycleModels, "Select")
@Html.ValidationMessageFor(model => model.Order.BicycleModel)
</div>

更新

@Html.ValidationMessageFor(model => x.Selected_BicycleModelId)

已解决验证消息问题（感谢 Roman Ko）。任何关于“选择”消失的想法 - JQuery？

Answer 1

1. 这是不可能的。 <select> 元素无法提供占位符值。因此，一个常见的解决方法（与 Razor 采用的相同）是添加另一个具有空 value 属性的选项。这出现在下拉列表中，因为它与该列表中的任何其他选项非常相似。客户端和服务器端的表单验证使其不是“有效”选项。

2. 您需要提供更多信息来确定验证不再起作用的原因。特别是，模型中的属性和任何相关属性都会有所帮助。 请参阅@RomanKo 的答案。我不想通过在这里发布同样的内容来窃取他的风头。就我而言，我完全错过了。

Answer 2

试试这个：

@Html.ValidationMessageFor(model => x.Selected_BicycleModelId)

当涉及到“选择”标题时，您可以尝试使用 - 例如 - jQuery 删除它：

$(document).on('change', '#Selected_BicycleModelId', function () {
   $("#Selected_BicycleModelId option[value='']").each(function () {
       $(this).remove();
   });
});

请参阅jQuery remove options from select 了解更多详细信息。