1

我目前在 JS 文件中有以下代码，这是读取生成的具有团队名称的链接列表。单击链接时，相关文本框将填充每个团队的正确信息。

我现在已放入下拉列表，如下所示，并且想做完全相同的事情，但使用文本框，所以当您从下拉列表中选择一个选项时，它会获取该团队的数据。

使用链接时，我正在使用 a.teamLink 并在单击其中一个时进行监听，任何人都可以想到我将如何为下拉列表项执行此操作吗？这是下拉列表的生成代码以及下面的相关代码。

欢迎任何帮助！

生成的下拉列表 HTML 示例：

<div id="teamDropDownDiv">
    <select id="teamList" style="width: 160px;">
        option id="1362174068837" class="teamDropDown">Liverpool</option>
    </select>
</div>

生成的链接 HTML 示例：

<a id="1362174068837" href="#" class="teamLink">Liverpool</a>

JavaScript 监听每个链接：

Team.initTeamsLink = function(){
  $("a.teamLink").live("click", function(e){
    e.preventDefault();
    var teamId = ($(this)[0]).getAttribute('id');

    $.get('/show/team/'+teamId, function(response){
      if(response.retStatus === 'success'){
        var teamData = response.teamData;
        $('#teamId').val(teamData.key);
        $('#teamName').val(teamData.name);
      } else if(response.retStatus === 'failure'){

      }
    });  
  });
 };

HTML 的下拉列表 JADE 模板

div#teamDropDownDiv
    -if(teamsList.length > 0){
        select#teamList(style='width: 160px;')
            option
                -each team in teamsList
                    option.teamDropDown(id="#{team.key}") #{team.name}
    -}else{
        No teams till now..
    -}

HTML 的链接列表 JADE 模板

div#teamListDiv
  -if(teamsList.length > 0){
    -each team in teamsList
      a.teamLink(id="#{team.key}", href="#") #{team.name}
      br
  -}else{
    h3 No teams till now..
  -}

 Team.initTeamsDD = function(){
  $("teamList").live("change", function(e){
    e.preventDefault();
    var teamId = $(this).val();

    $.get('/show/team/'+teamId, function(response){
      if(response.retStatus === 'success'){
        var teamData = response.teamData;
        $('#teamId').val(teamData.key);
        $('#teamName').val(teamData.name);
      } else if(response.retStatus === 'failure'){

      }
    });  
  });
 };

显示团队功能

  /**
    * Get Meta data of a Team
    * Send back all the details of a Team
    */
  app.get('/show/team/:key', function(req, res){
    util.log('Serving request for url [GET] ' + req.route.path);
    Team.findByKey(req.params.key, function(err, teamData){
      if(!err && teamData){
        teamData = teamData;
        res.json({
          'retStatus' : 'success',
          'teamData' : teamData
        });
      } else {
        util.log('Error in fetching Team by key : ' + req.params.key);
        res.json({
          'retStatus' : 'failure',
          'msg' : 'Error in fetching Team by key ' + req.params.key
        });
      }
    });
  });
4

1 回答 1

1

也许这有效：

选项元素需要将团队 ID 作为值：

<div id="teamDropDownDiv">
    <select id="teamList" style="width: 160px;">
        <option id="1362174068837" class="teamDropDown" value="1362174068837">Liverpool</option>
    </select>
</div>

所以模板应该是这样的：

div#teamDropDownDiv
    -if(teamsList.length > 0){
        select#teamList(style='width: 160px;')
            option
                -each team in teamsList
                    option.teamDropDown(id="#{team.key}",value="#{team.key}") #{team.name}
    -}else{
        No teams till now..
    -}

并添加一个监听器来改变 select 的事件，并从 value 属性中获取选中的团队 ID：

$("#teamList").change(function(e){
    e.preventDefault();
    var teamId = $(this).val()
...
于 2013-03-01T22:55:25.670 回答