Question

我有一个表单，其中添加了＆＃34;请选择＆＃34; 选项以显示下拉列表。

表单的工作方式是，如果用户没有选择值1,2,5,16,16-30等，则表单不应提交。

在我的表单中，如果我选择＆＃34;请选择＆＃34;然后表格被提交，因为它被视为1,2-5,6-15,16-30等。

运行时生成的表单的HTML代码为：

PrintWriter

问题陈述：

我想知道我应该在上面的HTML代码中做出哪些更改，以便＆＃34;请选择＆＃34;选项不被视为HTML中的其他下拉值（1,2-5,6-15,16-30等）。

Answer 1

要在选择输入上强制执行表单验证，您需要在选择表单上使用required属性，并将初始选项的值设置为""。

注意：aria-required="true"也可以正常工作，特别是对于那些还不支持HTML5的浏览器，我更喜欢较短的HTML5替代方案。这也适用于selected="selected" vs selected。

＆＃13;

<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>

＆＃13;

编辑：这也可以通过Javascript完成。

＆＃13;

// 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();
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

要简单地阻止用户选择一个选项，只需在html中为选项添加disabled（正如评论中的问题所指出的那样，标记为可能的副本，@ ccsmckelvey）。

但是，您也可以在选项中添加display:none：

select option:first-of-type{
    display:none;
}

至少适用于android，但显示第一个选项的文本（即使它应该被隐藏 - 不知道为什么）。

无论如何，重要的是要记住验证表格，如另一个答案所示。

如何防止用户从css中的下拉列表中选择默认值？

2 个答案: