Node.js中的动态下拉列表 [英] Dynamic Dropdown in Node.js

问题描述

这里是Node.js的新手：

Newbie to Node.js here:

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

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

基本上，我有两个表：技能和技能类别。

Basically, I have two tables: Skill and Skill_Category .

我想从 Skill_Category 中选择一个，并与之关联的 Skill 。

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尝试在Google上进行大量研究，但没有发现任何对我有帮助的东西。

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?

谢谢！

推荐答案

因此，一个下拉列表将导致另一个下拉列表显示。除非第二个下拉菜单具有数百个选项，否则您将不希望单独提出服务器请求以将其插入。这意味着您的逻辑应该全部在浏览器/客户端中。

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.

这意味着您需要 Skill_Category选择框以具有被调用以隐藏当前技能的JS函数。选择框并显示新选择的技能选择框。它们都将通过您的模板以html呈现，但是只有一个会显示（ display：block ），而其他一个会被隐藏（ display：无）。

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).

示例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代码：

Sample Jquery code:

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

---

更新：

如果您有次要选择框的大量选项列表，然后您可以发出ajax（HTTP GET）请求，并从服务器以JSON形式返回下拉列表的lsit。
您可能会遇到以下两种情况之一：静态JSON文件中的所有技能或保存在数据库中的所有技能。

---

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> 

而现在的jQuery将是：

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屋！