Node.js中的动态下拉菜单

Question

这里的新手Node.js：

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

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

我想从Skill_Category中选择，并与关联的Skill一起呈现。

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

我试着在google上研究一个很好的数额，但没有发现任何帮助我的东西。

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

谢谢！

Answer 1

所以一个下拉将导致另一个显示。除非第二个下拉列表有数百个选项，否则您不希望发出单独的服务器端请求。这意味着您的逻辑应该全部位于浏览器/客户端。

这意味着您希望您的“Skill_Category”选择框具有一个JS功能，用于隐藏当前的“技能”选择框并显示新选择的“技能”选择框。它们都将通过您的模板呈现在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）请求，并从服务器返回下拉列表的lsit作为JSON。 您可能会遇到以下两种情况之一：静态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); 
    } 
    }); 
}); 

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