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

請注意此代碼是未經測試，但應該工作