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

jquery

— oz.
fonte

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

— gnarf
fonte

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

— 4imble
fonte

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();

— PaulG
fonte

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'

— djs
fonte

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>

— sathya
fonte

3

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

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

— MacAnthony
fonte

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');

— Jarrod
fonte

Esta é uma resposta muito melhor.

— precisa

1

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

irá defini-lo como 0

— Josh Mein
fonte

1

Selecione a quarta opção

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

exemplo em jsfiddle

— dabar
fonte

2

solução válida ... para um concurso de ofuscação de código! :)

— Lambart