如何使用 Express/MongoDB/Nodejs 在 EJS 模板中创建动态 select 选项？

Question

My dependencies are EJS, Express, and Mongoose.

I am trying to figure out how I can make a Form/Select/Option that is dynamically driven by another Select/Option. In my app.js I have two different arrays, optionOneList and optionTwoList, that are created when I query the database. Then in my first EJS section I have an Select list with both of the query parameters as options. I would like the optionOneList or optionTwoList variables to be used in creating the options for the second EJS template section, and the results will differ depending on what is selected in the first EJS section.

I tried troubleshooting this the following ways:

1. Creating a standalone js file with the arrays after they are queried and passing that into the EJS template. From looking at other stackoverflow posts it didn't seem like this would work because you can't pass a js variable value to an ejs variable.
2. I can't save the array/variable in a section of the EJS template because once the page loads I essentially lose access to it (this is client/server related, but I am not well versed enough in this topic to explain this better - hopefully someday).

I also assumed I would have some luck if I just saved optionOneList/optionTwoList as local variables, but that wasn't working for me either.

Express Template Section One

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 Template Section One

Note: This first select is what I want to drive what options that are available for the second select

<select id="firstSelection">
        <option selected>Default</option>
        <option value="queryOne">queryOne</option>
        <option value="queryTwo">queryTwo</option>
</select>

EJS Template Section One

<select id="secondSelection">    
        <% for (let available of optionOneList) {%>
        <option>
        <%= available.Name %>
        </option>
        <% } %>
</select>

I am happy to take links to specific parts of the documentation that could point me in the right direction, or critiques on my understanding of why certain things didn't work. Thanks in advance for any feedback or resources.

Answer 1

If you are a novice developer, look towards SPA (Single Page) applications that are created using React . Look at the example of this library from github . Data should be transferred using the http protocol.