如何在ListBox中显示多个选定的项目

Question

我有一个ListBox，您可以在其中选择多个项目，并将这些项目保存到数据库中。一切正常但当我回到ListBox查看项目时，只选择了第一个，即使我选择了3.

列表框：

<asp:ListBox runat="server" SelectionMode="Multiple" ID="txtEdtContactDocuments"></asp:ListBox>

代码：

for (var i = 0; i < document.getElementById('<%= txtEdtContactDocuments.ClientID %>').length; i++) {
  for (var x=0;x<result.Docs.length;x++) {
        if (Number(document.getElementById('<%= txtEdtContactDocuments.ClientID %>')[i].value) == Number(result.Docs[x].DocType)) {
              document.getElementById('<%= txtEdtContactDocuments.ClientID %>')[i].selected = "selected";
              } else {
                 document.getElementById('<%= txtEdtContactDocuments.ClientID %>')[i].selected = "";
                 document.getElementById('<%= txtEdtContactDocuments.ClientID %>')[i].selected = false;
              }
        }
  }

循环看起来正确，它确实找到我选择的3个项目，但它们没有在列表中突出显示：

我也试过了document.getElementById('<%= txtEdtContactDocuments.ClientID %>')[i].selected = true;，但这改变了一切。只有第一个项目仍然被选中。

Answer 1

这是一个算法问题。假设result.Docs集合中有多个项目，那么您将覆盖在for (var x=0;x<result.Docs.length;x++)循环的早期迭代中可能设置的内容。

如果您在此行后添加break;语句，则您的算法应该有效：document.getElementById('<%= txtEdtContactDocuments.ClientID %>')[i].selected = "selected";。当找到合适的项目时，它将终止内部循环。

但是，我建议重构代码并彻底摆脱内循环。例如，您可以使用LINQ查询替换它。

注意：不需要使用jQuery或任何其他JS框架。您可以使用vanilla JavaScript轻松完成任务：https://jsfiddle.net/hjybjz3e/

Answer 2

尝试使用jQuery设置所选选项。

替换

document.getElementById('<%= txtEdtContactDocuments.ClientID %>')[i].selected = "selected";

使用：

$('#<%= txtEdtContactDocuments.ClientID %>').eq(i).attr("selected", "true");

.eq（）是一个jQuery函数，用于使用[]表示法选择特定索引处的对象。