jQuery criar selecione Opções da lista de JSON, não acontece como anunciado?

Question

Como é que isso não funciona (operando em uma lista de seleção vazia <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);

                }
            }
            );

        }

Mas isso faz:

• Substituir:

  var dropdownList = $("#requestTypes");

• Com simples javascript idade:

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

Answer 1

$("#requestTypes") retorna um objeto jQuery que contém todos os elementos selecionados. Você está tentando chamar o método add() de um elemento individual, mas em vez disso que você está chamando o método add() do objeto jQuery, que faz algo muito diferente.

Para acessar o elemento DOM si mesmo, você precisa tratar o objeto jQuery como uma matriz e obter o primeiro item fora dele, usando $("#requestTypes")[0].

Answer 2

Por padrão, seletores jQuery retornar o objeto jQuery. Adicione isto a obter o elemento DOM devolvidos:

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

Answer 3

Para coisas como esta, eu uso texotela de caixa de plug-in escolha com a sua função ajaxAddOption simples.