我的依赖项是EJS、Express和Mongoose。
我正试图弄清楚如何制作一个由另一个Select/Option动态驱动的Form/Select/Option。在我的app.js中，我有两个不同的数组，optionOneList和optionTwoList，它们是在我查询数据库时创建的。然后，在我的第一个EJS部分中，我有一个Select列表，其中包含两个查询参数作为选项。我希望在为第二个EJS模板部分创建选项时使用optionOneList或optionTwoList变量，结果将根据第一个EJS部分中选择的内容而有所不同。
我尝试通过以下方式对此进行故障排除：
- 在查询数组后创建一个带有数组的独立js文件，并将其传递到EJS模板中。从stackoverflow的其他帖子来看，这似乎不起作用，因为你不能将js变量值传递给ejs变量
- 我无法将数组/变量保存在EJS模板的一个部分中，因为一旦页面加载，我基本上就无法访问它(这与客户端/服务器有关，但我对这个主题还不够熟悉，无法更好地解释这一点——希望有一天(
我还认为，如果我只是将optionOneList/optionTwoList保存为局部变量，我会有一些运气，但这对我来说也不起作用。
快速模板第一部分
app.get('/general', async (req, res) => {
const optionOneList = await collectionOne.find({ "Person": "queryOne" });
const optionTwoList = await collectionOne.find({ "Person": "queryTwo" });
res.render('general/index', {optionOneList: optionOneList, optionTwoList: optionTwoList} )
});
EJS模板第一节
注意：第一个选择是我想要驱动的，第二个选择可以使用什么选项
<select id="firstSelection">
<option selected>Default</option>
<option value="queryOne">queryOne</option>
<option value="queryTwo">queryTwo</option>
</select>
EJS模板第一节
<select id="secondSelection">
<% for (let available of optionOneList) {%>
<option>
<%= available.Name %>
</option>
<% } %>
</select>
我很乐意链接到文档的特定部分，这些部分可以为我指明正确的方向，或者批评我对某些事情为什么不起作用的理解。提前感谢您的任何反馈或资源。
如果您是一名新手开发人员，请关注使用React创建的SPA(单页(应用程序。看看github中这个库的例子。应使用http协议传输数据。
我参加聚会有点晚了，但到了这里，发现了如何做。
在下面的代码中，im像对待res.render()一样传递一个数组。我在我的选择中写下了我的所有选项，当然还有EJS模板；(。不要忘记选项中的value属性！
<select class="selectpicker" id="firstSelection">
<% for( let idx in myArray) { %>
<option value='<%= myArray[idx]%>'>
<%= myArray[idx]%>
</option>
<% }; %>
</select>
我使用Bootstrap 4中的selectpicker(不是5，因为它是一个旧项目(来让它看起来更好，我不喜欢CSS
现在我需要在它们之间切换。我尽量坚持你的问题，但我可能遗漏了一些东西，至少你需要正确的逻辑。但让我们开始吧。
首先，你必须使用一些jQuery，通过CDN或你的服务器导入它，如果你使用CDN，优先考虑更轻的缩小版本：
CDN：<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
服务器端：<script src="js/jquery-3.6.0.min.js"></script>
您需要知道，通过res.render()函数传递的变量仅在您呈现的页面上可用。如果您使用include(yourEjsFile)进行更深入的模板化，请再次传递相同的变量，如下所示：include(yourEjsFile, {var1, var2})
为了让事情变得更容易，为您想要的每个选项创建一个下拉列表，并将其设置为不可见(CSS中的display: none(，我们将在之后立即显示它们。
好的，现在是switchero函数：我假设第一个下拉列表的可能输出值是其他下拉列表ID
$('#firstSelection').click(() => {
let value = $(this).val(); //'this' is the current element : #firstSelection
$("#queryOne").css("display", "none"); // hide all dropdowns
$("#queryTwo").css("display", "none");
$('#' + value).css("display", "block"); // show the correct one
});
jQuery是一个强大的工具，如果你正确使用它，你的网站将很容易动态。而不是像Amwey说的那样，不要去React。对于初学者(和有经验的开发人员(来说，这很复杂，我花了几个星期的时间才让它正常运行，尽管当时我有一些网络经验。我试图尽可能明确，因为我没有资源可以给你：/
希望它能帮助这个星球上的某个人！