JavaScript / jQuery-从2个下拉菜单中获取输入

Question

我有2个下拉列表，这既持有的同一列表teams ，一个被用作home团队和一个作为away球队。 目前第一个下拉列表有效，当从列表中选择一个team时，其id和name将输出到页面。 但是，当单击另一个下拉菜单时，什么也不会发生。 因此，例如，输出使用ID和小组名称并将其输出到文本框。

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

为主队列表生成的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'){

      }
    });  
  });

Answer 1

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

Team.initTeamsDD = function(){
  $("#homeTeamList, #awayTeamList").change(function(e){
...