jQuery crea opciones de lista de selección de JSON, ¿no sucede como se anuncia?

Question

¿Cómo es que esto no funciona (que opera en una lista de selección vacío <select id="requestTypes"></select>

$(function() { 

     $.getJSON("/RequestX/GetRequestTypes/", showRequestTypes); 

    } 
    ); 


    function showRequestTypes(data, textStatus) { 

     $.each(data, 
      function() { 

       var option = new Option(this.RequestTypeName, this.RequestTypeID); 
       // Use Jquery to get select list element 
       var dropdownList = $("#requestTypes"); 

       if ($.browser.msie) { 
        dropdownList.add(option); 
       } 

       else { 

        dropdownList.add(option, null); 

       } 
      } 
      ); 

     } 

pero esto:

• Reemplazar:

  var dropdownList = $("#requestTypes");

• Con el viejo y simple javascript:

  var dropdownList = document.getElementById("requestTypes");

Answer 1

$("#requestTypes") devuelve un objeto jQuery que contiene todos los elementos seleccionados. Está intentando llamar al método add() de un elemento individual, pero en su lugar llama al método add() del objeto jQuery, que hace algo muy diferente.

Para acceder al elemento DOM en sí, debe tratar el objeto jQuery como una matriz y obtener el primer elemento de la misma, usando $("#requestTypes")[0].

Answer 2

Por defecto, los selectores de jQuery devolver el objeto jQuery. Añadir esto para conseguir el elemento DOM volvió:

var dropdownList = $("#requestTypes")[0]; 

Answer 3

Para cosas como esta, uso texotela's select box plugin con su función simple ajaxAddOption.