Javascript 使用大量但相同的html元素实现重复行为

假设我们有一组具有特定行为的HTML元素。在HTML页面上使用其中一个是很容易的

但是，让1000个相同的JS小提琴出现在一个页面上的最佳实践是什么？这不仅仅是动态生成所需的HTML元素，更重要的是为每个具有不同值和id的元素生成行为/JS代码

例如：

document.getElementById("ID1").onchange = function () {
 //some complicated behaviors
};

需要时，在运行时生成上述代码的ID2/ID3/ID4…ID1000版本。请注意，它必须在没有服务器的HTML环境中运行。选择选项/数据存储在与数组或某种类型相同的html文件中

---

非常感谢您的任何建议。

理想情况下，您可以使用AJAX从服务器获取下一组选项，而不是在DOM中加载所有可能的选项。所以当你选择州的时候，它会去抓该州的县，然后当你选择县的时候，它会去抓该州的城市

更进一步，当您选择该州时，它会将所选州发送回服务器，以获取该州的所有县。然后，当您选择该县时，它会将该县发送回服务器，以便它可以获取城市

当然，您可以使用自己选择的服务器端语言PHP、ASP.net、Ruby、Python等

否则，您将向DOM中注入大量永远不会被使用的数据，这将大大增加加载时间；而AJAX通常相当快

---

有很多关于AJAX使用的教程，所以我不打算在回答中介绍这些，但这是最好的解决方案。

您仅使用Javascript标记问题，因此我假设您在本地拥有数据，而不是从服务器检索数据。如果您从服务器获取数据，请使用Ajax并仅获取您当时需要的数据

通过Javascript，您可以使用

document.createElement('element'); // this is faster than Jquery if you generate a lot of data 

使用Jquery，您可以使用

$(document.createElement('element'))

---

@Disfster的JS小提琴就是一个例子。我所处的情况是，我无法在适当的位置安装服务器。所有选择数据必须存储在同一个html文件中。如果没有服务器，html首先来自哪里？一定是从什么地方装的？但是如果没有AJAX，那么您唯一的选择就是将其全部加载到DOM中。也许可以将其加载为JSON并使用javascript解析出来？那要看情况。但是这样做是一个糟糕的实现，它是作为HTML页面本地加载的。服务器处于一个非常封闭的环境中，无法从中检索数据，只能向其中发布一些内容。顺便说一下，可能的选择选项并不多。相反，元素的数量非常庞大。嗯，HTML文件首先必须来自服务器。你发布州和检索县等等。否则，就像我说的，你必须从一开始就在DOM中加载所有东西，这很难看。创建元素很容易。困难的部分是通过在运行时生成新代码来获得新生成元素所需的行为。@Tim1234您的意思是如何生成document.getElementByIdID1.for all ID？@Tim1234创建一个函数，该函数接受一个值作为输入，然后创建字符串ID+值，getElementById将搜索该字符串您只需更改函数值即可更改行为