如何使用我的 mysql 数据库中的数据创建下拉列表？

Question

So, I have an html form where the user will select some options. I want to create a dropdown list, in which the data we will be coming from my mysql database. These are my files:

Ignore the other files. Index.html is my home page and my form is at air-tickets.html
air-tickets.html

<form id="form-submit" method="post">
    <div class="container" id="air-form-container">
        <div class="col-md-12">
            <label for="sel2" class="dropbar-label">Airline: </label>
            <select class="form-control airline-select" id="sel2" name="airline">
                <option value="none">Select airline</option>
            </select>
        </div>
    </div>
</form>

air_tickets.js

var express = require('express');
const path = require('path');
var air_tickets_router = express.Router();
const bodyParser = require('body-parser');

var db = require('../database');

air_tickets_router.use(bodyParser.json());

air_tickets_router.route('/')
    .get(function(req, res, next) {
        res.sendFile('air-tickets.html', { root: path.join(__dirname, '../public') });
    })
    .post(function(req, res, next) {
        console.log(req.body);
        console.log(req.body.sellist1);
        res.statusCode = 200;
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/air-tickets');
    });

air_tickets_router.get('/get_airlines', function(req, res, next) {
    var sql = 'SELECT airline FROM flight ORDER BY airline';
    db.query(sql, function(err, data, fields) {
        if (err) throw err;
        res.render('airline-list', { title: 'Airline List', userData: data });
    });
});

module.exports = air_tickets_router;

database.js

const mysql = require('mysql');

var mysqlConnection = mysql.createConnection({
    host: "localhost",
    user: "myuser",
    password: "mypassword",
    database: "myproject",
    multipleStatements: true
});

mysqlConnection.connect(function(err) {
    if (err) throw err;
    console.log('Database is connected successfully !');
});

module.exports = mysqlConnection;

And the app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

const mysqlConnection = require("./database")
const bodyParser = require('body-parser');

//Require routes
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var air_ticketsRouter = require('./routes/air_tickets');

var app = express();
app.use(bodyParser.json());

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//Use the routes
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/air-tickets', air_ticketsRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // render the error page
    res.status(err.status || 500);
    res.render('error');
});

module.exports = app;

Also I have this air_tickets_form.js in public-->js file

const airlineSelect = document.querySelector("#sel2");

document.addEventListener("DOMContentLoaded", (event) => {
    fetch('http://localhost:3000/air-tickets/get_airlines')

    .then(req => req.json())
        .then(res => {
            for (let airline of res) {
                let airlineOption = document.createElement("option");
                console.log(airline);
                airlineOption.value = airline;
                airlineOption.innerHTML = airline;
                airlineSelect.appendChild(airlineOption);
            }
        })
        .catch(err => console.log(err));
});

Answer 1

Generally you could add an <option> to your select in javascript like this:

function addOption() {
  var select = document.getElementById("sel2"); //get your <select> by its ID
  var option = document.createElement("option"); // create a New <option>
  option.appendChild(document.createTextNode("Airline Name")); // provide <option> Text 
  option.setAttribute("id", "yourOptionID"); // giving your <option> an id
  select.appendChild(option); // add the created <option> to your <select>
}

Now you only have to loop through your Database Results and add options as described

Answer 2

Well, You can approach this problem using 2 methods:

1 - First Method (Not recommended) You can wait for your HTML page to load, then run Javascript to fetch your data and convert it to Options under the select Tag

This is exactly what your air_tickets_form.js is doing, all you need is to include this file inside your html

just add this line at the end of your body

<script src="./js/air_tickets_form.js"></script>

and express will serve this file from the static folder "Public"

Disadvantage: your website will load and for few seconds, the list will be empty if the fetch request failed, then it will remain empty until reload

2 - Second Method (Recommended) Use the Render Engine within your app.js - i can see that you use Render Engine in this line

app.set('view engine', 'jade');

Jade became old, and replaced now with pug You can install it using NPM then replace this line with this

app.set('view engine', 'pug')

Now you are using the view engine

then you need to convert your html to PUG Syntax

for now you can use online converter such as this one https://html-to-pug.com/

but I recommend you to read Pug Documentation to understand how the syntax is working (Be caution that spaces count is important in pug )

and when you want to send the HTML file, you send the pug file instead using this code

res.render('index.pug' , data) 

as data is your air tickets data

then inside your Pug file, at the select tag, you will want to make a loop that insert the HTML Automatically

form#form-submit(method='post')
  #air-form-container.container
    .col-md-12
      label.dropbar-label(for='sel2') Airline: 
      select#sel2.form-control.airline-select(name='airline')
        option(value='none') Select airline
          each val,index in data
            option(value=index) #{val}

the each function will loop in the data and then add the line below it for each data

Advantage: Your website will load with all the data ready to use without waiting

Another approach you can use is to Mix between the two methods - use the render engine to make the data ready

and make a button when pressed it will refresh the data using js

of course according to your need.