0

我有 2 个下拉列表，它们都包含相同的列表teams，一个用作home团队，一个用作away团队。在第一个下拉列表起作用的那一刻，当从列表中选择 a 时，team它会输出到页面。但是当单击另一个下拉菜单时，什么也没有发生。例如，输出采用 id 和团队名称并将它们输出到文本框。idname

这是每个下拉列表的示例和下面的相关代码，有人可以帮助我吗？

为主队列表生成的 HTML：

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

为客队列表生成的 HTML：

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

用于生成 HTML 的 JADE 模板（用于两个列表）：

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}

页面的 JavaScript：

 Team.initTeamsDD = function(){
  $("#teamList").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'){

      }
    });  
  });
4

1 回答 1

1

这两个<select>元素都具有相同的“id”值，即“teamList”。你永远不应该有两个具有相同“id”的元素。因此，on-change 事件处理程序只附加到其中一个。您应该将它们更改为“homeTeamList”和“awayTeamList”，然后使用：

Team.initTeamsDD = function(){
  $("#homeTeamList, #awayTeamList").change(function(e){
...
于 2013-03-02T19:43:49.057 回答