jQuery crée des options de liste de sélection à partir de JSON, ne se produisant pas comme annoncé?

Question

Comment ça se fait que ça ne marche pas (opérer sur une liste de sélection vide <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);

                }
            }
            );

        }

Mais ceci fait:

• Remplacer:

  var dropdownList = $("#requestTypes");

• Avec le vieux javascript ordinaire:

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

Answer 1

$("#requestTypes") retourne un objet jQuery contenant tous les éléments sélectionnés. Vous essayez d'appeler la méthode add() d'un élément individuel, mais vous appelez plutôt la méthode $("#requestTypes")[0] de l'objet jQuery, qui effectue une opération très différente.

Pour accéder à l'élément DOM lui-même, vous devez traiter l'objet jQuery comme un tableau et en extraire le premier élément en utilisant <=>.

Answer 2

Par défaut, les sélecteurs jQuery renvoient l'objet jQuery. Ajoutez ceci pour obtenir l'élément DOM renvoyé:

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

Answer 3

Pour ce genre de choses, j'utilise le de texotela select box plugin avec sa simple fonction ajaxAddOption.