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){
...