title: jQuery - Find next select element
body: <p>What I am trying to do is populate data in a select element. I'm using the following code, where a user selects a SubjectCategory from one drop down, which then should populate the next select element's html. The handler itself is working just fine, it returns the correct html I need to place inside the select element.</p>
  
  <p>Also, keep in mind that I eventually clone both of these select elements and will need to populate them accordingly.</p>
  
  <p>The problem is that <code>$elem</code> is always returning null.</p>
  
  <p>I'm guessing that it's a problem with this line of code, however not quite sure (keeping in mind that I'm also cloning these two select elements):</p>
  
  <p><code>var $elem = $this.closest('div').prev().find('select');</code></p>
  
  <pre><code>$(".SubjectCategory").live("click", function () {
      var $this = $(this);
      var $elem = $this.closest('div').next().find('select');
      var a = $this.val();
  
      $.get("/userControls/BookSubjectHandler.ashx?category=" + a, {}, function (data) {
          $elem.html(data);
      });
  });
  
  &lt;div class="singleField subjectField"&gt;
    &lt;label id="Category" class="fieldSml"&gt;Subject Matter&lt;/label&gt;
    &lt;div class="bookDetails ddl"&gt;&lt;select id="ddlSubjectMatter" class="fieldSml SubjectCategory"&gt;&lt;/select&gt;&lt;/div&gt;
  
    &lt;label id="Subjects" class="fieldSml"&gt;Category&lt;/label&gt; 
    &lt;div class="bookDetails ddl" id="subjectMatter"&gt;&lt;select id="ddlSubjects" class="fieldSml Subjects"&gt;&lt;/select&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>