jQuery - Buscar el siguiente elemento de selección

Question

Lo que intento hacer es rellenar datos en un elemento seleccionado. Estoy usando el siguiente código, donde un usuario selecciona una categoría de asunto de un menú desplegable, que luego debe llenar el siguiente html del elemento de selección. El manejador funciona bien, devuelve el html correcto que necesito colocar dentro del elemento seleccionado.

Además, tenga en cuenta que eventualmente clono estos dos elementos seleccionados y será necesario completarlos en consecuencia.

El problema es que $elem siempre devuelve nulo.

supongo que se trata de un problema con esta línea de código, sin embargo no está muy seguro (teniendo en cuenta que también estoy clonación de estos dos elementos selectos):

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

Está buscando dentro del <label>, no el próximo <div> como desee. next solo obtiene un elemento después del actual.

Pruebe esto: Busca el primer div junto a su elemento principal.

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

Answer 2

¿Por qué está creando una variable extraña $this? A menos que haya omitido el código que lo requiere para un ámbito diferente, simplemente llame a $ (esto). Eso podría estar causando el problema, también.

Answer 3

Dado que el elemento de origen tiene un id de ddlSubjectMatter y el selectivo elemento de destino tiene un id de subjectmatter, puede ser mucho más simple para capitalizar la primera letra del segundo id (es decir, hacer subjectmatter), entonces se obtiene el segundo elemento por:

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

que hace que la relación elemento independiente de la presentación del documento.

Dicho sea de paso, HTML no es válido para tener elementos seleccionados sin opciones, aunque no es un gran problema.