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

在pug和Node.js中创建一个类别和子类别选择菜单，可以通过以下步骤实现：

创建一个pug模板文件，命名为menu.pug，并在其中定义一个表单元素用于选择类别和子类别：

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

  select(id='subcategory')

在Node.js中创建一个路由文件，例如routes.js，并在其中处理GET请求，渲染上述pug模板文件：

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

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

module.exports = router;

在Node.js的主文件中，例如app.js，设置Express应用程序并将上述路由文件引入：

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');
});

创建一个JavaScript文件，例如script.js，用于处理类别选择变化时的子类别更新逻辑：

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);
}