javascript - 添加全部按钮不会使选择删除验证，就像选择了某些内容一样

Question

我在 IE11 浏览器中无法正常进行验证。

基本上发生的事情是我有选择列表，当选择列表时，会在另一个文本区域中显示所选值，以允许用户知道选择了哪个员工或分支。有两个按钮，标记为“添加全部”和“删除全部”。

问题是如果提交了表单并且未选择必填字段，则表明需要选择它们，但是当您点击添加全部时，它会选择所有用户应该不再需要验证。由于按下添加全部按钮，它不会将其视为所做的选择，并且仍然强制用户单击选择，然后重新单击“添加全部”按钮。

在JS中我可以写一些东西，一旦选择按钮，就不再需要验证，除非在提交时未选择用户或其他什么？

在 Chrome 中它可以正确执行，但由于某种原因 IE11 会提示。

任何帮助将不胜感激!

https://jsfiddle.net/aelliott/pu8kLmeb/

步骤:

1. 在下拉列表中选择 list 统计信息
2. 选择继续 - 不填写表单(系统会显示必填字段的验证。)
3. 在任一按钮上选择添加全部
4. 验证不会消失，表单仍然无法提交，因为选择认为没有选择任何内容

代码

function handleLocationChange() {
  var selected = [];

  loc.find("option:selected").each(function() {
    selected.push($(this).text());
  });

  selectedElement.val(selected.join("\n"));
}

function setLocationOptionsSelected(selected) {
  loc.find("option").prop("selected", selected);
  loc.change();
}


function setSelectedOnEmployeeOptions(selected) {
  EmployeeName.find("option").prop("selected", selected);
  EmployeeName.change();
}

function handleEmployeeNameChange() {
  var selected = [];
  EmployeeName.find("option:selected").each(function() {
    selected.push($(this).text());
  });
  selected1Element.val(selected.join("\n"));
}

Answer 1

在使用它并找到类似 this issue logged on github 的页面之后，我能够添加 IE 的 hack - 即设置 selectedIndex在添加所有项目之前手动更改选择列表的属性(受 this answer 启发)。

function setLocationOptionsSelected(selected) {
  if (selected && window.navigator.userAgent.indexOf('Trident') >= 0) {
    loc.prop('selectedIndex', 0);
  }
  loc.find("option").prop("selected", selected);
  loc.change();
}
function setSelectedOnEmployeeOptions(selected) {
  if (selected && window.navigator.userAgent.indexOf('Trident') >= 0) {
    EmployeeName.prop('selectedIndex', 0);
  }
  EmployeeName.find("option").prop("selected", selected);
  EmployeeName.change();
}

我本来会使用 $.browser.msie 但显然它已被弃用并且在 jQuery 1.10 中不可用。

我做了fork the fiddle但意识到这是使用最新版本的 jQuery，并且您说无法从版本 1.10 升级，所以 this version使用 jQuery 1.10。

更新

您提到，当用户单击删除全部时，该字段不会显示为未选中状态，因此表单提交处理不会将该字段捕获为无效，尽管具有必需的> 属性已启用。为了处理这种情况，可以更新 IE 特定代码，在删除所有选项时将 selectedIndex 设置为 -1。

在下面的代码中，selected 变量已从条件中删除，并移至三元运算符中，以决定作为 .prop()< 的第二个参数传递的值.

function setLocationOptionsSelected(selected) {
  if (window.navigator.userAgent.indexOf('Trident') >= 0) {
    loc.prop('selectedIndex', (selected?0:-1));
  }
  loc.find("option").prop("selected", selected);
  loc.change();      
}

function setSelectedOnEmployeeOptions(selected) {
  if (window.navigator.userAgent.indexOf('Trident') >= 0) {
    EmployeeName.prop('selectedIndex', (selected?0:-1));
  }
  EmployeeName.find("option").prop("selected", selected);
  EmployeeName.change();
}