jQuery - Trova il prossimo elemento selezionato

Question

Quello che sto cercando di fare è popolare i dati in un elemento select. Sto usando il seguente codice, in cui un utente seleziona una SubjectCategory da un menu a discesa, che quindi dovrebbe popolare l'html dell'elemento select successivo. Il gestore funziona correttamente, restituisce l'html corretto che devo inserire all'interno dell'elemento select.

Inoltre, tenere presente che alla fine clonerò entrambi questi elementi selezionati e sarà necessario popolarli di conseguenza.

Il problema è che $elem restituisce sempre null.

Sto indovinando che si tratta di un problema con questa riga di codice, ma non del tutto sicuro (tenendo a mente che sto anche la clonazione questi due elementi di selezione):

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

Stai cercando all'interno dello <label>, non nel prossimo <div> come desideri. next ottiene solo un elemento dopo quello corrente.

Prova questo: Cerca il primo div accanto al tuo elemento genitore.

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

Answer 2

Perché stai creando una variabile estemporanea $this? A meno che tu non abbia omesso il codice che lo richiede per un ambito diverso, chiama $ (questo). Potrebbe anche causare il problema.

Answer 3

Dato che l'elemento sorgente ha un id di ddlSubjectMatter e l'elemento di selezione bersaglio ha un id di subjectMatter, può essere molto più semplice di capitalizzare la prima lettera del secondo id (cioè fare SubjectMatter) allora si ottiene il secondo elemento da:

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

rende il rapporto elemento indipendente del layout del documento.

Per inciso, l'HTML non è valido per avere elementi selezionati senza opzioni, non che sia un grosso problema.