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”的元素。因此，on-change事件处理程序仅附加到其中一个。您应该将它们更改为“homeTeamList”和“awayTeamList”，然后使用：

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

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

1 个答案: