如何在列表框中显示多个选定的项目

Question

我有一个列表框，您可以在其中选择多个项目，并将它们保存到数据库中。 一切正常，但是当我回到列表框查看项目时，即使我选择了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;您的算法应该可以工作break; 这行之后的语句： document.getElementById('<%= txtEdtContactDocuments.ClientID %>')[i].selected = "selected"; 。 找到适当的项目后，它将终止内部循环。

但是，我建议重构代码并完全摆脱内部循环。 例如，您可以将其替换为LINQ查询。

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

Answer 2

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

更换

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

带有：

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

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