Node.js 中的动态下拉菜单 [英] Dynamic Dropdown in Node.js

问题描述

这里是 Node.js 的新手:

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

基本上，我有两个表:Skill 和 Skill_Category.

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

我假设我需要使用一些模板引擎(在网页中呈现).

我尝试在 google 上进行大量研究，但没有发现任何对我有帮助的内容.

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

谢谢！

解决方案

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

这意味着您希望您的Skill_Category"选择框来调用 JS 函数来隐藏当前的技能"；选择框并显示新选择的技能"选择框.它们都将通过您的模板以 html 格式呈现，但只会显示一个 (display:block) 而其他隐藏 (display:none).

示例 HTML:

 <option value=communication">Communication</option><option value=teamwork">Team Work</option><option value="technical">Technical</option></选择><select class="skill";id=交流"><option value=1">一个</option><option value=2">两个</option><option value=3">三</option></选择><select class="skill";id="团队合作"><option value=1">一个</option><option value=2">两个</option><option value=3">三</option></选择><select class="skill";id=技术"><option value=1">一个</option><option value=2">两个</option><option value=3">三</option></选择>
示例 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){///public/skills目录下的JSON文件res.sendFile(__dirname + '/public/skills/'+req.params.skill+.json");//或一些数据库查找，然后是一个json发送:var 技能 = someDatabaseLookup();res.json(技能);});
HTML
 <option value=communication">Communication</option><option value=teamwork">Team Work</option><option value="technical">Technical</option></选择><select id="技能"></选择>

而 jquery 现在将是:

$('#skill_category').on('change',function(){$.get('skill_category/'+this.value,function(data){for(var j = 0; j <长度; j++){$('#skill').contents().remove();var newOption = $('');newOption.attr('text', data[j].text);newOption.attr('value', data[j].value);$('#skill').append(newOption);}});});

请注意此代码未经测试但应该可以使用

Newbie to Node.js here:

What is an easy way to make dynamic dropdowns in node.js?

Basically, I have two tables: Skill and Skill_Category .

I want to select from the Skill_Category and be presented with the associated Skill.

I would assume I would need to use some template engine (to render in a webpage).

I tried researching a good amount on google, but didn't turn up anything that helped me.

If anyone can point me in the right direction?

Thank you!

解决方案

So one dropdown will cause the other to show. Unless the second dropdown has hundreds of options you won't want to make a separate server side request to get it in. This means your logic should all be in the browser/client side.

This means you want your "Skill_Category" select box to have a JS function called to hide the current "Skill" select box and show the newly chosen "Skill" select box. They will all be rendered in html by your templating, but only one will ever be shown (display:block) while the others are hidden (display:none).

Sample 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> 

Sample Jquery code:

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

---

Update:

If you have a large list of options for the secondary select box then you can make an ajax (HTTP GET) request, and returning the lsit of dropdowns from your server as JSON. You will probably have one of two scenarios: all of you skills in a static JSON file, or saved in a database.

Your node code will look like:

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> 

while the jquery will now be:

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

Do note this code is untested but should work

这篇关于Node.js 中的动态下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！