Defina o índice selecionado de um menu suspenso usando jQuery


165

Como faço para definir o índice de uma lista suspensa no jQuery se a maneira como estou encontrando o controle é a seguinte:

$("*[id$='" + originalId + "']") 

Faço isso dessa maneira porque estou criando controles dinamicamente e como os IDs são alterados ao usar Web Forms, achei isso como uma solução alternativa para encontrar alguns controles. Mas uma vez que eu tenho o objeto jQuery, não sei como definir o índice selecionado como 0 (zero).

Respostas:


352

Primeiro de tudo - esse seletor é bem lento. Ele examinará todos os elementos DOM procurando os IDs. Será menos prejudicial ao desempenho se você puder atribuir uma classe ao elemento.

$(".myselect")

Para responder sua pergunta, existem algumas maneiras de alterar o valor dos elementos selecionados no jQuery

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);

Há uma melhor forma de fazê-lo? Imaginei que ele varreria todo o DOM procurando corresponder ao ID, mas como sou novo no jQuery, imaginei, vamos fazê-lo funcionar e, em seguida, ver se há uma maneira melhor de fazê-lo. Qualquer conselho será apreciado.
oz.

Sim - se você pode atribuir uma classe ao (s) elemento (s) que precisa encontrar, seria um seletor muito mais rápido.
Gnarf

@gnarf não são IDs mais rápidos?
KBN

#an-idé mais rápido, mas *[id$=ends-with]é o caminho mais lento, isso é o que o "atribuir uma classe para o elemento" é o significado
gnarf

Que tal se eu tiver vários ASP.net DropDownList com diferentes valores de índice selecionado?
SearchForKnowledge

106

Acabei de descobrir isso, funciona para mim e eu pessoalmente acho mais fácil ler.

Isso definirá o índice real, exatamente como a opção número 3 da resposta do gnarf.

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

Isso não costumava funcionar, mas funciona agora ... veja o bug: http://dev.jquery.com/ticket/1474

Termo aditivo

Conforme recomendado nos comentários, use:

$("select#elem").prop('selectedIndex', 0);


30
E a partir do jQuery 1.6, você deveria estar usando .prop('selectedIndex', 0); independentemente de se .attr()obras ou não :)
gnarf

1
Correto, na verdade pode não funcionar no 1.7. veja a resposta aceita: stackoverflow.com/questions/8010664/…
4imble

+1 para o adendo. Meu código antigo foi quebrado devido a esse problema
Bilal

11

Estou escrevendo esta resposta em 2015 e, por algum motivo (provavelmente versões mais antigas do jQuery), nenhuma das outras respostas funcionou para mim. Quero dizer, eles mudam o índice selecionado, mas na verdade não reflete no menu suspenso real.

Aqui está outra maneira de alterar o índice e, na verdade, fazê-lo refletir no menu suspenso:

$('#mydropdown').val('first').change();

1
Obrigado pela sua resposta. Somente esta resposta é trabalhado para mim
Viraj Dhamal

Também em 2015, não tenho nenhum problema em prop('selectedIndex', ...);(testado com Chrome e Firefox) alterar a seleção.
Lambart

2
Pelo que vale a pena, deve-se salientar que você está fazendo algo diferente aqui: está ativando um changeevento no menu suspenso, que também pode ser uma solução / solução útil para as pessoas que estão mudando a seleção ligando prop('selectedIndex', ...), em vez de val(...). Talvez o problema seja que você está ouvindo um changeevento e é isso que não estava funcionando para você? É verdade que simplesmente mudar o property não vai disparar nenhum evento ... #
22320

9

estou a usar

$('#elem').val('xyz');

para selecionar o elemento de opção que possui value = 'xyz'


9

Código JQuery:

$("#sel_status").prop('selectedIndex',1);

Código Jsp:

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>

3

Você deseja pegar o valor da primeira opção no elemento de seleção.

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));

3

Para selecionar a segunda opção

$('#your-select-box-id :nth-child(2)').prop('selected', true);

Aqui nós adicionamos o `trigger ('change') para fazer o evento disparar.

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');

Esta é uma resposta muito melhor.
precisa

1
$("[id$='" + originalId + "']").val("0 index value");

irá defini-lo como 0


1

Selecione a quarta opção

$('#select').val($('#select option').eq(3).val());

exemplo em jsfiddle


2
solução válida ... para um concurso de ofuscação de código! :)
Lambart
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.