IE中带required属性的多选select空值处理失效问题求助

我写了一段带多选下拉框的表单代码，特意加了<option value="">[None]</option>来解决选中项无法清空的问题——这个逻辑在Firefox和Chrome里都正常工作，但到了IE里就掉链子了：当用户选择「[None]」提交表单时，select控件会弹出红色边框提示"You must choose an item from the list"，根本没法完成提交。

我的HTML代码是这样的：

<form name="form1" id="form1" action="#">
  <select id="u2p" name="u2p" size="10" multiple="multiple" required="required">
    <option value="">[None]</option>
    <option value="1">Firefox</option>
    <option value="2">Chrome</option>
    <option value="3">MS Explorer</option>
  </select>
  <input type="submit" value="Submit" id="submit1" />
</form>

而且我不想修改现有的大量JS逻辑，比如这些处理选中状态的代码：

// Select '[None]' if nothing is selected:
if ( $("#u2p :selected").length == 0 ) $("#u2p").val("");
// Clear all values (1,2,3) if user selects '[None]'
$("select").change(function() {
  if ( $.inArray("", $(this).val()) != -1 ) $(this).val("");
});

请问有没有简便的兼容方案？

这个问题本质是IE对required属性在多选select上的处理逻辑比较特殊——它会把value=""的选项判定为「未选中有效选项」，所以才会触发必填提示。这里有个不用修改现有JS的简便方案：

我们可以在表单提交前做个小检测，针对IE环境临时调整required属性的状态，具体代码如下：

$("#form1").submit(function() {
  const selectEl = $("#u2p")[0];
  // 检测是否为IE浏览器（兼容IE11及以下）
  if (document.documentMode) {
    const selectedValues = $(selectEl).val();
    // 如果选中了[None]（value=""的选项）
    if (selectedValues && selectedValues.includes("")) {
      // 临时移除required属性，让IE允许提交
      selectEl.required = false;
      // 提交后立刻恢复required，不影响后续操作
      setTimeout(() => {
        selectEl.required = true;
      }, 0);
    }
  }
  return true;
});

逻辑说明： #

• 首先通过document.documentMode检测是否是IE环境（这比UA判断更可靠，能覆盖IE11）；
• 如果用户选中了「[None]」，就临时把select的required设为false，让IE跳过必填校验；
• 用setTimeout在提交后立刻恢复required属性，保证后续操作的必填规则依然生效。

这个方案完全不需要改动你现有的JS逻辑，只需要加这么一段提交前的处理代码，就能解决IE下的提交问题，同时保留你原本的清空选中项的逻辑。

内容的提问来源于stack exchange，提问作者Wernfried Domscheit