JavaScript / jQuery - taking input from 2 drop down identical menus

Question

I have 2 drop down lists, which both hold the same list of teams, one to be used as the home team and one as the away team. At the moment the first drop down list works, when a team is selected from the list, it's id and name is output to the page. But when the other drop down is clicked, nothing happens. So for example the output takes the id and team name and outputs them to the textboxes.

Here is an example of each drop down list and the relevant code below, can anyone help me out?

HTML generated for home team list:

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

HTML generated for away team list:

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

JADE template used to generate the HTML (used for both lists):

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 for the page:

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

      }
    });  
  });

John S · Accepted Answer · 2013-03-02 19:43:49Z

1

The two <select> elements both have the same "id" value, which is "teamList". You should never have two elements with the same "id". Because of this, the on-change event handler is getting attached to only one of them. You should change them to "homeTeamList" and "awayTeamList", and then use:

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

answered Mar 2, 2013 at 19:43

John S

21.5k9 gold badges50 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

germainelol Over a year ago

I've now edited the initTeamsDD function as you suggested, and edited the template to make two different lists...an away list and a home list. The lists are both populated correctly but when I select either of them, none of them output the data.

John S Over a year ago

@germainelol - No idea. I would have to see the modified code. Here is a jsfiddle demo showing the on-change handler working for two drop-down lists.

Collectives™ on Stack Overflow

JavaScript / jQuery - taking input from 2 drop down identical menus

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related