如何防止用户从css的下拉列表中选择默认值？
如何防止用户从css的下拉列表中选择默认值？
提问于 2018-06-05 04:10:10
我有一个表单，我在其中为下拉菜单添加了“请选择”选项。
表单的工作方式应该是，如果用户不选择值1、2-5、6-15、16-30等，则表单不应提交。
在我的表单中，如果我选择“请选择”，则表单将被视为1、2-5、6-15、16-30等。
在运行时生成的表单的HTML代码为：
<select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" aria-required="true" aria-invalid="false">
<option value="Please Select" selected="selected">Please Select</option>
<option value="1">1</option>
<option value="2-5">2-5</option>
<option value="6-15">6-15</option>
<option value="16-30">16-30</option>
<option value="31-100">31-100</option>
<option value="101-250">101-250</option>
<option value="251-1000">251-1000</option>
<option value="1001-2500">1001-2500</option>
<option value="2501 +">2501 +</option>
</select>问题陈述：
我想知道我应该在上面的HTML代码中做些什么更改，以便“请选择”选项不会被视为HTML中的其他下拉值(1、2-5、6-15、16-30等)。
回答 2
Stack Overflow用户
发布于 2018-06-05 04:25:23
要在选择输入上强制执行表单验证，需要在选择表单上使用required属性，并将初始选项的值设置为""。
注意：aria-required="true"也可以很好地工作，特别是对于还不支持HTML5的浏览器，我只是更喜欢较短的HTML5替代方案。这也适用于selected="selected"与selected。
<form>
<select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" required aria-invalid="false">
<option value="" selected>Please Select</option>
<option value="1">1</option>
<option value="2-5">2-5</option>
<option value="6-15">6-15</option>
<option value="16-30">16-30</option>
<option value="31-100">31-100</option>
<option value="101-250">101-250</option>
<option value="251-1000">251-1000</option>
<option value="1001-2500">1001-2500</option>
<option value="2501 +">2501 +</option>
</select>
<button type="submit">Submit</button>
</form>
编辑:这也可以通过Javascript完成。
// Obtain our form via its ID
var form = document.querySelector('form');
// Add a listener to our form to wait for its submission
if (form.addEventListener) {
form.addEventListener("submit", validate, false); //Modern browsers
} else if (form.attachEvent) {
form.attachEvent('onsubmit', validate); //Old IE
}
function validate(e) {
var select = e.target.querySelector("select");
// Get the value of our selected option
var selectedOption = select.options[select.selectedIndex].value;
// Compare the value of the default option to the selected option
if (selectedOption === "Please Select") {
// Trigger Error and prevent the form submission
alert("Please select an option!")
e.preventDefault();
}
}<form>
<select name="input_12" id="input_37_12" class="medium gfield_select" tabindex="5" aria-required="true" aria-invalid="false">
<option value="Please Select" selected="selected">Please Select</option>
<option value="1">1</option>
<option value="2-5">2-5</option>
<option value="6-15">6-15</option>
<option value="16-30">16-30</option>
<option value="31-100">31-100</option>
<option value="101-250">101-250</option>
<option value="251-1000">251-1000</option>
<option value="1001-2500">1001-2500</option>
<option value="2501 +">2501 +</option>
</select>
<button type="submit">Button</button>
</form>
Stack Overflow用户
发布于 2018-06-05 06:06:24
要简单地防止用户选择一个选项，只需在选项的html中添加disabled (正如注释中的问题所指出的那样，将其标记为可能的副本，@csmckelvey)。
但是，您也可以简单地将display:none添加到选项中：
select option:first-of-type{
display:none;
}至少可以在android上工作，并且显示第一个选项的文本(即使它应该是隐藏的-不知道为什么)。
无论如何，记住验证表单是很重要的，正如另一个答案所建议的那样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50688065
复制相关文章
相似问题
腾讯云开发者
