基于下拉选择在客户端使用 EJS 过滤猫鼬数据

Posted 2023-03-11

【中文标题】基于下拉选择在客户端使用 EJS 过滤猫鼬数据

【英文标题】：Filtering mongoose data on the clientside with EJS based on a dropdown selection

【发布时间】：2019-11-11 01:19:48

【问题描述】：

这里是我第一个项目的初学者。

我有 2 个 Mongoose 原理图和模型，其中包含 categories 和 products。我将products 嵌套在categories 模型中。

使用 Node 和 Express，我将所有类别发送到我的页面。通过使用 EJS 和 for 循环，我可以创建一个包含所有类别名称的下拉（选择）列表。

现在我在尝试列出包含在所选类别中的所有产品时失败了。

我从尝试在 EJS 标记中过滤它，到组合外部脚本，再到发送带有所选数据的 AJAX POST 请求。没有任何效果。

The schemas

const productSchema = new mongoose.Schema (
    image: String,
    name: type: String, required: true,
    description: type: String, required: true,
    category: type: String, required: true,
    price: type: Number, required: true
);

const categorySchema = new mongoose.Schema (
    name: type: String, required: true,
    products: [
        type: mongoose.Schema.Types.ObjectId,
        ref: "Product"
    ]
);

The route 

app.get("/proposals/create", (req, res) => 
    Category.find().populate("products").exec((err, cats) => 
        if(err) 
            console.log(err);
         else 
            res.render("createproposal", cats: cats);
             
    );
);

The loop

<select id="catDropdown" class="ui fluid dropdown">
   <option value="">Category</option>
      <% for(i = 0; i < cats.length; i++)  %>
        <option><%= cats[i].name %></option>  
      <% ; %>
</select>

【问题讨论】：

是否要根据所选类别创建新的下拉列表？你想要多级下拉菜单吗？提供一些信息

感谢您的回复。我想要一个显示嵌套在所选类别中的产品的第二个下拉菜单。

【参考方案1】：

我建议你使用 optgroup，只是为了让你的代码简单并且你的数据集中。

<select id="catDropdown" class="ui fluid dropdown">
   <option value="">Category</option>
   <% cats.forEach(category =>  %>
   <optgroup label="<%= category.name %>" >
       <% category.products.forEach(product =>  %>
           <option> <%= product.name %> </option>
       <% ); %>
   </optgroup>
   <% ); %>
</select>

【讨论】：

感谢您的建议。但这个名单会越来越大。最后我可能需要更多的下拉菜单。我只是不确定如何根据我选择的类别过滤产品。