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

291

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

obrigado

carne
fonte
Apenas curioso, por que essa pergunta foi rejeitada? Provavelmente porque ele não mostra qualquer trecho de código :)
Shasi kanth

Respostas:

451

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!

nickf
fonte
8
Os parâmetros do método são um pouco enganadores; a função (val, texto) deve ser função (índice, opção), por exemplo. Funciona bem caso contrário.
mbillard
14
@ Crossbrowser: Eu discordo - vale textrealmente descrevo as variáveis ​​e seu uso.
nickf
1
apenas para esse exemplo, no entanto, como método de uso geral, essas variáveis ​​são enganosas (não me deu nenhuma pista de como usar esse método). No entanto, vou dar que a resposta não foi sobre o uso do método $ .each.
mbillard
1
Eu estava usando anteriormente mySelect.append(new Option(text, val));, o que não funcionou no IE8. Eu tive que mudar para @ nickf'smySelect.append($('<option></option>').val(val).html(text));
Matthew Clark
5
@briansol:.attr('selected', true|false)
nickf
167

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) );
Phrogz
fonte
1
Como você define as propriedades como selecionar um valor padrão?
precisa
20
Eu gosto deste melhor que o "<option></option>"método; isso parece sujo.
Josh M.
1
não funciona no ie8 .. apenas tentei e também vi outro comentário sobre isso abaixo.
Brianol
13

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); 
cgreeno
fonte
11

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));    
Har
fonte
7

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

Zakaria
fonte
1
Se você usar aspas duplas dentro dos parâmetros de opção, eles fecharão a função e quebrarão o script. Alterar .prepend("...") / $("...")para .prepend('...') / $('...')corrigia o trecho.
Heraldmonkey 02/02
4

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($("&lt;option/&gt;").attr("value", val).text(text));
});
Marechal
fonte
3

Você pode usar direto

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

-> Aqui você pode usar string direta

Jay
fonte
3

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

Johan
fonte
0

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.

costeletas
fonte
0

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.

vapcguy
fonte
Por que você está incrementando o contador em cada um? Você é novo no jquery? var counter = $ ('[id * = "ddlPosition _"]'). length é menos detalhado e mais eficiente. Acho que você precisa de um pouco mais de experiência antes de começar a postar seu código. Este não é um código de qualidade de produção, pois é mal escrito e excessivamente complexo para uma tarefa tão trivial. Sem ofensa, mas há uma razão para você ter 58 respostas e sem votos positivos.
Athens Holloway
Você obviamente entendeu mal o que eu estava criando. O contador é incrementar o valor postado no menu suspenso, e eu tinha vários com o mesmo ID, apenas com um "_ ##" diferente no final, então .length () seria impreciso. Essa é a razão do "id * =" no seletor.
precisa saber é o seguinte
Quanto às minhas outras respostas, geralmente defendo métodos mais simples sempre que possível, e se as pessoas não fossem tão esotéricas com sua codificação e escrevessem coisas que eram mais simplificadas, minhas respostas provavelmente teriam mais votos. Mas as pessoas querem parecer inteligentes e não escolhem algo tão simples. Não me faz mal por querer simplesmente a indústria. Também não gosto de solucionar problemas ou criar códigos de outras pessoas que sejam ridiculamente mais complexos do que precisam.
vapcguy
Eu também poderia ter mais confiança em $ (this) .length () nesse loop mais se alguém pudesse explicar por que o envio de "$ (this)" em vez do objeto para o myAppender não funcionou.
precisa saber é o seguinte
0

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ê ....

Dulith De Costa
fonte
-1

tente esta função:

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}
Sebastian Mach
fonte