JavaScript/jQuery-从两个相同的下拉菜单中获取输入

我有两个下拉列表，它们都包含相同的

团队列表

，一个用作

主场

团队，另一个用作

客场

团队。第一个下拉列表工作时，当从列表中选择

团队

时，它是

id

，并且

名称

被输出到页面。但是当单击另一个下拉列表时，什么也不会发生。例如，输出采用id和团队名称，并将它们输出到文本框

下面是每个下拉列表的示例和相关代码，有人能帮我吗

为主队列表生成的HTML：

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

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

页面的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'){

      }
    });  
  });

这两个

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

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

---

现在，我按照您的建议编辑了

initTeamsDD

功能，并编辑了模板以生成两个不同的列表…一个

远离

列表和一个

主页

列表。两个列表都已正确填充，但当我选择其中一个时，它们都没有输出数据。@germainelol-不知道。我必须看到修改过的代码。下面是一个显示用于两个下拉列表的更改处理程序的示例。

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