如何从 MySQL 数据库填充 ejs 表单下拉列表选项？

Question

            <div class="form-group">
                <label for="Station_Type">Station Type</label>
                <select name="Station_Type" class="form-control" name="Station_Type" id="Station_Type" autocomplete="off">
                
                    <option>Sewing</option>
                    <option>Cutting</option>
                    <option>Finishing</option>
                    <option>Distribution</option>
                    <option>Ironing</option>
                    <option>Offline</option>
                </select>
            </div>

我希望此下拉字段的选项值由存储在 MySQL 数据库中名为“stationoptions”的单独表中的值填充，该表将不断更新。现在，选项是硬编码的，如我上面的代码所示，但是，我希望下拉列表在 MySQL 中的“stationoptions”表中添加新值时自动更新。请问如何从 MySQL 查询数据到这个表单域？

这就是我将此表单中的数据插入到另一个单独的表中的方式。 （在我的 .js 文件中）

addPlayerPage: (req, res) => {
    res.render('add-player.ejs', {
        title: "Welcome | Add a new transaction",
        message: ''
    });
},

addPlayer: (req, res) => {
    
    let playerId = req.params.id;
    let LineNo = req.body.LineNo;
    let Station_Type = req.body.Station_Type;

   
    let query = "INSERT INTO `lineid` (id, LineNo, Station_Type) VALUES (NULL, '" + LineNo + "', '" + Station_Type + "')"; 


            db.query(query, (err, result) => {
                if (err) {
                    return res.status(500).send(err);
                }                
        
            });  
            res.redirect('/line'); 
}, 

Answer 1

试试这个：

<div class="form-group">
   <label for="Station_Type">Station Type</label>
   <select id="Station_Type" name="Station_Type" class="form-control" placeholder="Station_Type" value="<%= playerLine.Station_Type %>" required>

<!-- for loop code start -->
   <% for(var i=0; i < playerLine.length; i++) { %>
   <option value="<%= playerLine[i].Station_Type %>"><%= playerLine[i].Station_Type %></option>
   <% } %>
<!-- for loop code end -->

<!-- and maybe you can remove this part -->
<option value="<%= playerLine.Station_Type %>"><%= playerLine.Station_Type %></option>
                    <option>Sewing</option>
                    <option>Cutting</option>
                    <option>Finishing</option>
                    <option>Distribution</option>
                    <option>Ironing</option>
                    <option>Offline</option>
<!-- and maybe you can remove this part -->

     </select>
 </div>

编辑

在您的js 文件中：

addPlayerPage: (req, res) => {
    // query the table you want show in your ejs
    let myQuery = "SELECT field_name FROM table_name;" // query for the dropdown

    db.query(myQuery , function(err, result) {
            if (err) {
                return res.status(500).send(err); // check if query have error
            }
            res.render('add-player.ejs', {
                title: "Welcome | Add a new transaction",
                message: '',
                drecord: result // setting result reference for ejs
            });
        })
},

addPlayer: (req, res) => {
    
    let playerId = req.params.id;
    let LineNo = req.body.LineNo;
    let Station_Type = req.body.Station_Type;

   
    let query = "INSERT INTO `lineid` (id, LineNo, Station_Type) VALUES (NULL, '" + LineNo + "', '" + Station_Type + "')"; 


            db.query(query, (err, result) => {
                if (err) {
                    return res.status(500).send(err);
                }                
        
            });  
            res.redirect('/line'); 
}, 

在你add-player.ejs:

<div class="form-group">
   <label for="Station_Type">Station Type</label>
   <select id="Station_Type" name="Station_Type" class="form-control" placeholder="Station_Type" required>

<!-- for loop code start -->
   <% for(var i=0; i < drecord.length; i++) { %>
   <option value="<%= drecord[i].field_name %>"><%= drecord[i].field_name %></option>
   <% } %>
<!-- for loop code end -->

     </select>
 </div>