express 数据绑定下拉列表

​​nodejs+express+mysql(后台实例项目练习10—用户界面下拉列表)​​

通过JQ 与路由js 交互

ejs片段

<tr>
                            <td class="td_1">用户组：</td>
                            <td>
                                <div id="s1" class="select">
                                    <span>搜索</span>
                                    <ul>

                                    </ul>
                                    <input type="hidden" name="usergroup" id="usergroup"/>
                                </div>
                            </td>
                        </tr>

JQ片段

$(document).ready(function(){
        $.get("/getallgroup",function(data,err){
            console.log(data);
              for(var i = 0; i < data.length; i++){
                 var liNode = $("<li myindex="+ data[i].groupId +">"+ data[i].groupName +"</li>");
                  $("#s1 ul").append(liNode);
              }
        })
 
    })
    function select(id){
        $(id + " span").click(function(){
            $(id + " ul").show(500);
            $(id  + " ul li").click(function(){
                $(id + " span").html($(this).html());
                $(id + " input").val($(this).attr("myindex"));
                $(id + " ul").hide(500);
            });
        });
    }

    $(document).ready(function(){
        select("#s1");
        select("#s2");
    });

路由事件

var express = require('express');
var router = express.Router();
var db = require('../sql_db.js');
/* GET users listing. */
router.get('/adduser', function(req, res, next) {
  res.render('user_add.ejs');
});
router.get('/getallgroup',function(req,res,next)
{
  db.query('select * from usergroup',function (err,data)
  {
    if(err)
    {
      console.log(err);
    }else
    {
      res.send(data);
    }
  });
 
});
 
module.exports = router;

数据访问方式

HTML界面加载》》JQready 事件 》》$get》》路由JS访问数据库 得到数据 sender》》JQ的callback获得数据 》》绑定HTML

JQ 事件

//绑定事件
    function select(id){
        //注册事件
        $(id + " span").click(function(){
              //动画显示ul
            $(id + " ul").show(500);
            // 绑定事件
            $(id  + " ul li").click(function(){
                // 替换文本
                $(id + " span").html($(this).html());
                     // 设置属性 方便 数据提交
                $(id + " input").val($(this).attr("myindex"));
                     // 隐藏掉ul
                $(id + " ul").hide(500);
            });
        });
    }

    $(document).ready(function(){
        select("#s1");
        select("#s2");
    });