title: JavaScript / jQuery - Listening for selected drop down option
body: <p>I currently have the following code in a JS file, this is reading the list of links generated which have team names. When the link is clicked, the relevant textboxes are filled with the correct info for each team. </p>
  
  <p>I have now put in the drop down list as shown below, and would like to do the exact same thing but using the textbox, so when you select one of the options from the drop down list, it fetches the data for that team.</p>
  
  <p>When using the links, I'm taking a.teamLink and listening for whenever one of them is clicked, can anyone think as to how I would do this for the drop down list items? Here is the generated code for the drop down list and the relevant code as well below.</p>
  
  <p>Any help welcome!</p>
  
  <p>Generated drop down list HTML example:</p>
  
  <pre><code>&lt;div id="teamDropDownDiv"&gt;
      &lt;select id="teamList" style="width: 160px;"&gt;
          option id="1362174068837" class="teamDropDown"&gt;Liverpool&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Generated link HTML example:</p>
  
  <pre><code>&lt;a id="1362174068837" href="#" class="teamLink"&gt;Liverpool&lt;/a&gt;
  </code></pre>
  
  <p>JavaScript to listen for each link:</p>
  
  <pre><code>Team.initTeamsLink = function(){
    $("a.teamLink").live("click", function(e){
      e.preventDefault();
      var teamId = ($(this)[0]).getAttribute('id');
  
      $.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'){
  
        }
      });  
    });
   };
  </code></pre>
  
  <p>Drop down list JADE template for HTML</p>
  
  <pre><code>div#teamDropDownDiv
      -if(teamsList.length &gt; 0){
          select#teamList(style='width: 160px;')
              option
                  -each team in teamsList
                      option.teamDropDown(id="#{team.key}") #{team.name}
      -}else{
          No teams till now..
      -}
  </code></pre>
  
  <p>Link list JADE template for HTML</p>
  
  <pre><code>div#teamListDiv
    -if(teamsList.length &gt; 0){
      -each team in teamsList
        a.teamLink(id="#{team.key}", href="#") #{team.name}
        br
    -}else{
      h3 No teams till now..
    -}
  
   Team.initTeamsDD = function(){
    $("teamList").live("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'){
  
        }
      });  
    });
   };
  </code></pre>
  
  <p>Show team function</p>
  
  <pre><code>  /**
      * Get Meta data of a Team
      * Send back all the details of a Team
      */
    app.get('/show/team/:key', function(req, res){
      util.log('Serving request for url [GET] ' + req.route.path);
      Team.findByKey(req.params.key, function(err, teamData){
        if(!err &amp;&amp; teamData){
          teamData = teamData;
          res.json({
            'retStatus' : 'success',
            'teamData' : teamData
          });
        } else {
          util.log('Error in fetching Team by key : ' + req.params.key);
          res.json({
            'retStatus' : 'failure',
            'msg' : 'Error in fetching Team by key ' + req.params.key
          });
        }
      });
    });
  </code></pre>