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

将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>标记内使用select。但是，您必须确保正确设置所有<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>

两者都是必需的，但是第二个具有不带任何value属性的选项。根据{{3}}：

如果不包含value属性，则该值默认为文本包含在元素中。

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

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

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

Answer 2

required属性仅在您获得用于包装select元素的表单并且具有类型为button的{{1}}（或input）来处理表单提交时起作用行动。

submit

当您单击“提交”按钮时，浏览器会警告您选择字段为必填项。由于您使用的是自定义js处理程序，因此不会收到浏览器警告。

以Form data validation作为参考，在<form> <select required> <option> any thing </option> </select> <button type="submit"> Submit the form </button> </form>部分中查找详细信息。

为什么JavaScript为<select>创建的“必需”属性无法正常工作？

2 个答案: