防止用户在下拉菜单中选择默认值

Question

我试图阻止用户选择默认的下拉菜单选项。有没有办法在下拉菜单选项中添加文本而不是值？我的代码：

<select name='test'>
<option value='default' selected='selected'>Please select the value</option>
<option value='value1'>value1</option>
<option value='value2'>value2</option>
</select>

我不希望用户选择“请选择值”选项。有更好的方法吗？

- FlyingCat

Answer 1

客户端代码（javascript/HTML）对此没有问题，但这只是其中的一半。

由于您不希望用户实际上“选择”这个“默认值”，所以我会这样做：

<option value=''>Please select the value</option>

将value的值保留为空字符串。然后在服务器端代码中，检查所发布的值是否为空。如果您不打算使用它，那么填充任意默认值就没有意义。

默认情况下，第一个<option>将根据标准浏览器行为进行选择，因此您实际上不需要selected属性。但是，您确实需要value=''，否则浏览器可能会发布<option>的文本内容。

- Wesley Murch

---

disabled 属性可以使用，但它实际上不能阻止用户在未选择值的情况下提交表单，因此从效果上讲，与此相同。 - Wesley Murch

Answer 2

您可以进行以下操作

<option value='' disabled='disabled' selected='selected'>Please select the value</option>

我假设你正在使用一些客户端验证来确保在提交时不选中此选项？这将意味着一旦取消选中，他们就无法再选择它，但您需要对其进行验证。

可以尝试以下验证代码：

<script LANGUAGE="JavaScript">
<!-- 
    function ValidateForm(form){ 
    ErrorText= ""; 
    if ( form.test.selectedIndex == 0 ) {
         alert ( "Please select a value" ); 
         return false; 
    } 
    if (ErrorText= "") { 
        form.submit()
    } 
} 
-->
</script>

然后在你的提交按钮上。

<input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)"> 

- user1211577

Answer 3

您可以使用JavaScript在用户提交表单时检查所选值。 如果value="default"，则警告用户。

- Diodeus - James MacFarlane

Answer 4

    <select name='test'>
<option value='default' selected='selected' enabled='false'>Please select the value</option>
<option value='value1'>value1</option>
<option value='value2'>value2</option>
</select>

- David Rasuli

---

已编辑为更合适的解决方案。 - David Rasuli

Answer 5

使用Html Helper时，将Select的默认值的value字段设置为空

 @Html.DropDownListFor(Model => Model.Value, new List<SelectListItem>() { new SelectListItem { Text = "Select", Value = "" }, new SelectListItem { Text = "Value1", Value = "Value1" }, new SelectListItem { Text = "Value2", Value = "Value2" } }, new { @required = "required"})

- VishVyavhare