jQuery - 次のselect要素の検索

Question

私がしようとしているのは、select要素のデータを取り込むことです。次のコードを使用しています。ここでは、ユーザーが1つのドロップダウンからSubjectCategoryを選択します。次に、次のselect要素のhtmlに値を設定します。ハンドラ自体はうまく動いています。select要素の中に配置する必要のある正しいhtmlを返します。

また、私は最終的にこれらの選択要素の両方をクローンし、それに応じてそれを設定する必要があることに注意してください。

問題は、$elemが常にnullを返すことです。

私はしかしかなり確実（私はまた、これらの2つの選択の要素をクローニングしてることを念頭に置いて）いない、それはこのコード行に問題だと推測している：

var $elem = $this.closest('div').prev().find('select');

$(".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); 
    }); 
}); 

<div class="singleField subjectField"> 
    <label id="Category" class="fieldSml">Subject Matter</label> 
    <div class="bookDetails ddl"><select id="ddlSubjectMatter" class="fieldSml SubjectCategory"></select></div> 

    <label id="Subjects" class="fieldSml">Category</label> 
    <div class="bookDetails ddl" id="subjectMatter"><select id="ddlSubjects" class="fieldSml Subjects"></select></div> 
</div> 

Answer 1

あなたは<label>の中で探していますが、次のものは<div>ではありません。 nextは現在の要素の後に1つの要素しか取得しません。

これを試してください：あなたの親要素の横にある最初のdivを探します。 （すなわち作るソース要素がddlSubjectMatterのIDを持っており、ターゲットselect要素が主題のIDを持っている、第2のIDの最初の文字を大文字にずっと簡単であってもよいことを考えると

var $elem = $this.closest('div').nextAll('div').first().find('select'); 

Answer 2

なぜ外字の$this変数を作成していますか？別のスコープでコードを必要とするコードを省略していない限り、$（this）を呼び出してください。それも問題の原因になっている可能性があります。

Answer 3

これは、文書レイアウトの要素の関係をそれぞれ独立させることができ

var elem = document.getElementById(this.id.replace(/^ddl/,'')); 

：主題）あなたはすることにより、第2の要素を取得します。

ちなみに、選択肢のない要素を選択するのは無効ですが、大きな問題ではありません。