Node.js 中的动态下拉菜单

Question

这里是 Node.js 的新手：

在 node.js 中制作动态下拉菜单的简单方法是什么？

基本上，我有两个表：Skill 和 Skill_Category。

我想从Skill_Category 中进行选择，并显示相关联的Skill。

我假设我需要使用一些模板引擎（在网页中呈现）。

我尝试在 google 上进行大量研究，但没有找到任何对我有帮助的东西。

如果有人能指出我正确的方向吗？

谢谢！

Answer 1

所以一个下拉菜单会导致另一个下拉菜单显示。除非第二个下拉菜单有数百个选项，否则您不会希望发出单独的服务器端请求来获取它。这意味着您的逻辑应该都在浏览器/客户端中。

这意味着您希望您的“Skill_Category”选择框调用一个 JS 函数来隐藏当前的“Skill”选择框并显示新选择的“Skill”选择框。它们都将由您的模板以 html 呈现，但只会显示一个 (display:block)，而其他则隐藏 (display:none)。

示例 HTML：

 <select id="skill_category">
   <option value="communication">Communication</option>
   <option value="teamwork">Team Work</option>
   <option value="technical">Technical</option>
 </select> 


   <select class="skill" id="communciation">
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select> 
   <select  class="skill" id="teamwork">
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select> 
   <select  class="skill" id="technical">
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select> 

示例 Jquery 代码：

$('#skill_category').on('change',function(){
  $('.skill').hide()
  $('#'+this.value).show()
});

---

更新：

如果您有大量用于辅助选择框的选项，那么您可以发出 ajax (HTTP GET) 请求，并以 JSON 格式从您的服务器返回下拉列表的 lsit。 您可能会遇到以下两种情况之一：所有技能都保存在静态 JSON 文件中，或者保存在数据库中。

您的节点代码如下所示：

app.get('/skill_category/:skill', function(req, res){
  //JSON file in the /public/skills directory
  res.sendFile(__dirname + '/public/skills/'+req.params.skill+".json");

  //or some database lookup followed by a json send:
  var skills = someDatabaseLookup();
  res.json(skills);
 });

HTML

 <select id="skill_category">
   <option value="communication">Communication</option>
   <option value="teamwork">Team Work</option>
   <option value="technical">Technical</option>
 </select> 
 <select id="skill">
 </select> 

jquery 现在是：

$('#skill_category').on('change',function(){
  $.get('skill_category/'+this.value,function(data){
     
     for(var j = 0; j < length; j++)
     {

       $('#skill').contents().remove();
       var newOption = $('<option/>');
       newOption.attr('text', data[j].text);
       newOption.attr('value', data[j].value);
       $('#skill').append(newOption);
     }
  });
});

请注意此代码未经测试，但应该可以工作