javascript - POST 表单只需要一个 select 标签

Question

标题基本上说明了一切。 我有 3 个选择标签，如果有任何选择被填充，我想让它继续。

• 如果一个被填满就可以继续。
• 如果两个都填满了就可以继续。
• 填满三个即可继续。
• 如果没有被填满则不能继续。

现在它只能在所有三个都被填充时才能继续，因为我在每个选择中添加了“required”属性。我该怎么办？

<table>
  <tr>
    <td>Option 1</td>
    <td>
      <select id="first" name="q4_op1" required>
        <option value="" selected>Select an option</option>
        <option value="Chrome">Chrome</option>
        <option value="Firefox">Firefox</option>
        <option value="Microsoft Edge">Microsoft Edge</option>
        <option value="Safari">Safari</option>
        <option value="Internet Explorer">Internet Explorer</option>
        <option value="Opera">Opera</option>
      </select>
    </td>
  </tr>

  <tr>
    <td>Option 2</td>
    <td>
      <select id="second" name="q4_op2" required>
        <option value="" selected>Select an option</option>
        <option value="Chrome">Chrome</option>
        <option value="Firefox">Firefox</option>
        <option value="Microsoft Edge">Microsoft Edge</option>
        <option value="Safari">Safari</option>
        <option value="Internet Explorer">Internet Explorer</option>
        <option value="Opera">Opera</option>
      </select>
    </td>
  </tr>

  <tr>
    <td>Option 3</td>
    <td>
      <select id="terceiro" name="q4_op3" required>
        <option value="" selected>Select an option</option>
        <option value="Chrome">Chrome</option>
        <option value="Firefox">Firefox</option>
        <option value="Microsoft Edge">Microsoft Edge</option>
        <option value="Safari">Safari</option>
        <option value="Internet Explorer">Internet Explorer</option>
        <option value="Opera">Opera</option>
      </select>
    </td>
  </tr>
</table>

Answer 1

试试这个:

var any = (
    document.getElementById('first').selectedIndex ||
    document.getElementById('second').selectedIndex ||
    document.getElementById('terceiro').selectedIndex
)

if (any !== 0) {
    // proceed
}

|| operator会做你想做的事。 检查fiddle .