Como adiciono opções a um DropDownList usando jQuery?

Como a pergunta diz, como adiciono uma nova opção a um DropDownList usando jQuery?

obrigado

Sem usar plugins extras,

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

Se você tinha muitas opções, ou esse código precisava ser executado com muita frequência, você deveria usar um DocumentFragment em vez de modificar o DOM muitas vezes desnecessariamente. Por apenas algumas opções, eu diria que não vale a pena.

------------------------------- Adicionado ------------------ --------------

DocumentFragmenté uma boa opção para aprimoramento de velocidade, mas não podemos criar elemento de opção usando, document.createElement('option')pois o IE6 e o ​​IE7 não o suportam.

O que podemos fazer é criar um novo elemento de seleção e anexar todas as opções. Quando o loop terminar, anexe-o ao objeto DOM real.

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
    _select.append(
            $('<option></option>').val(val).html(text)
        );
});
$('#mySelect').append(_select.html());

Dessa forma, modificaremos o DOM apenas uma vez!

Sem plug-ins, isso pode ser mais fácil sem usar o jQuery, em vez de ficar um pouco mais antigo:

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(myOptions, function(val, text) {
    $('#mySelect').append( new Option(text,val) );
});

Se você deseja especificar se a opção a) é o valor selecionado padrão eb) deve ser selecionada agora, você pode passar mais dois parâmetros:

    var defaultSelected = false;
    var nowSelected     = true;
    $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );

Com o plugin: jQuery Selection Box . Você consegue fazer isso:

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false); 

Você pode limpar seu DropDown primeiro $ ('# DropDownQuality'). Empty ();

Meu controlador no MVC retornou uma lista de seleção com apenas um item.

$('#DropDownQuality').append(
        $('<option></option>').val(data[0].Value).html(data[0].Text));    

Adicionar item à lista no início

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');

Adicionar item à lista no final

$('<option value="6">Java Script</option>').appendTo("#ddlList");

Operação suspensa comum (Obter, Definir, Adicionar, Remover) usando jQuery

Observe que a solução do @ Phrogz não funciona no IE 8, enquanto o @ nickf funciona nos principais navegadores. Outra abordagem é:

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("<option/>").attr("value", val).text(text));
});

Você pode usar direto

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

-> Aqui você pode usar string direta

E também, use .prepend () para adicionar a opção ao início da lista de opções. http://api.jquery.com/prepend/

usando jquery você pode usar

      this.$('select#myid').append('<option>newvalue</option>');

onde " myid " é o ID da lista suspensa e newvalue é o texto que você deseja inserir.

Eu precisava adicionar tantas opções aos menus suspensos quanto os existentes na minha página. Então eu usei desta maneira:

function myAppender(obj, value, text){
    obj.append($('<option></option>').val(value).html(text));
}

$(document).ready(function() {
    var counter = 0;
    var builder = 0;
    // Get the number of dropdowns
    $('[id*="ddlPosition_"]').each(function() {
        counter++;
    });

    // Add the options for each dropdown
    $('[id*="ddlPosition_"]').each(function() {
        var myId = this.id.split('_')[1];

        // Add each option in a loop for the specific dropdown we are on
        for (var i=0; i<counter; i++) {
            myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
        }
        $('[id*="ddlPosition_'+myId+'"]').val(builder);
        builder++;
    });
});

Isso configurou dropdowns dinamicamente com valores como 1 para n e selecionou automaticamente o valor para a ordem em que o dropdown estava (por exemplo, o segundo dropdown recebeu "2" na caixa, etc.).

Era ridículo que eu não pudesse usar thisou this.Objectou $.objalgo parecido no meu segundo .each(), embora --- eu realmente tive que obter o ID específico desse objeto e, em seguida, pegar e passar todo o objeto para a minha função antes que ele fosse acrescentado. Felizmente, o ID do meu menu suspenso foi separado por um "_" e eu pude obtê-lo. Eu não acho que deveria, mas continuava me dando exceções do jQuery. Algo que outras pessoas que lutam com o que eu era pode gostar de saber.

Vamos pensar que sua resposta é "successData". Contém uma lista que você precisa adicionar como opções em um menu suspenso.

success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
    //    NO DATA, throw an alert ...
    alert ("No Data Found");
} else {
    $.each(successData, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
} }

Isso funcionaria para você ....

tente esta função:

function addtoselect(param,value){
    $('#mySelectBox').append('<option value='+value+'>'+param+'</option>');
}