我想在pug和node.js中创建一个类别和子类别选择菜单。子类别根据所选类别更改的位置

form
  select(id='category', onchange='updateSubcategories()')
    option(value='category1') Category 1
    option(value='category2') Category 2
    option(value='category3') Category 3

  select(id='subcategory')

const express = require('express');
const router = express.Router();

router.get('/menu', (req, res) => {
  res.render('menu');
});

module.exports = router;

const express = require('express');
const app = express();
const routes = require('./routes');

app.set('view engine', 'pug');
app.use(express.static('public'));

app.use('/', routes);

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

function updateSubcategories() {
  const category = document.getElementById('category').value;
  const subcategorySelect = document.getElementById('subcategory');

  // 清空子类别选择菜单
  subcategorySelect.innerHTML = '';

  // 根据所选类别添加相应的子类别选项
  if (category === 'category1') {
    addOption(subcategorySelect, 'subcategory1', 'Subcategory 1');
    addOption(subcategorySelect, 'subcategory2', 'Subcategory 2');
  } else if (category === 'category2') {
    addOption(subcategorySelect, 'subcategory3', 'Subcategory 3');
    addOption(subcategorySelect, 'subcategory4', 'Subcategory 4');
  } else if (category === 'category3') {
    addOption(subcategorySelect, 'subcategory5', 'Subcategory 5');
    addOption(subcategorySelect, 'subcategory6', 'Subcategory 6');
  }
}

function addOption(selectElement, value, text) {
  const option = document.createElement('option');
  option.value = value;
  option.text = text;
  selectElement.appendChild(option);
}

script(src='script.js')