为什么 JavaScript 创建的"required"属性<select>无法正常工作？

Question

我想通过添加必需的属性来强制选择一个选项，但它似乎不起作用。据我说，这在语法上是正确的。请帮助我。提前谢谢。

function func() {
var a = document.getElementById("input").value;
if (a === "SE-IT-A" || a === "SE-IT-B") {
var arr = ["Choose Subject", "DBMS", "DSA"];
} else if (a === "TE-IT-A" || a === "TE-IT-B") {
var arr = ["Choose Subject", "CNS", "ADMT"];
}
var string = "";
for (i = 0; i < arr.length; i++) {
string = string + "<option>" + arr[i] + "</option>";
}
string = "<select required name='second'>" + string + "</select>";
document.getElementById("output").innerHTML = string;
}

<form>
<select name="class" id="input" onchange="func()" required>
<option value="">Choose Class</option>
<option value="SE-IT-A">SE-IT-A</option>
<option value="SE-IT-B">SE-IT-B</option>
<option value="TE-IT-A">TE-IT-A</option>
<option value="TE-IT-B">TE-IT-B</option>
</select><br>
<div id="output"></div>
</form>

Answer 1

仅当您获得一个表单来包装 select 元素并且具有类型submit来处理表单提交操作的button(或input(时，required属性才有效。

<form>
<select required>
<option> any thing </option>
</select>
<button type="submit"> Submit the form </button>
</form>

单击"提交"按钮时，浏览器将警告您"选择"字段是必需的。由于您使用的是自定义 JS 处理程序，因此不会收到浏览器警告。

以表单数据验证为参考，搜索The required attribute部分了解详细信息。

Answer 2

将disabled添加到第一个选项可能会解决问题：

<select name="class" id="input">
<option value="" disabled selected>Choose Class</option>
<option value="SE-IT-A">SE-IT-A</option>
<option value="SE-IT-B">SE-IT-B</option>
<option value="TE-IT-A">TE-IT-A</option>
<option value="TE-IT-B">TE-IT-B</option>
</select>

如果要使用required，则应在<form>标记中使用选择。但是，您必须确保正确设置所有<option>值。看看这两个选择：

<form>
<select name="class" id="input" required>
<option value="">Choose Class #1</option>
<option value="SE-IT-A">SE-IT-A</option>
<option value="SE-IT-B">SE-IT-B</option>
<option value="TE-IT-A">TE-IT-A</option>
<option value="TE-IT-B">TE-IT-B</option>
</select>
<select name="class" id="input" required>
<option>Choose Class #2</option>
<option value="SE-IT-A">SE-IT-A</option>
<option value="SE-IT-B">SE-IT-B</option>
<option value="TE-IT-A">TE-IT-A</option>
<option value="TE-IT-B">TE-IT-B</option>
</select>
<button type="submit">Submit</button>
</form>

两者都是必需的，但第二个选项没有任何值属性。根据MDN文档：

如果未包含 value 属性，则值默认为 包含在元素内。

因此，您在JS中添加的所有动态选项实际上都具有价值。

要修复它，您需要更改JS并在选项上设置适当的值。像这样：

for (i = 0; i < arr.length; i++) {
let value = i ? arr[i] : "";
string = `${string}<option value="${value}">${arr[i]}</option>`;
}