Eu tenho uma caixa de seleção:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

Gostaria de definir uma das opções como "selecionada" com base no índice selecionado.

Por exemplo, se estou tentando definir "Número 3", estou tentando o seguinte:

$('#selectBox')[3].attr('selected', 'selected');

Mas isso não funciona. Como posso definir uma opção como selecionada com base em seu índice usando o jQuery?

Obrigado!

NOTA : a resposta depende do jQuery 1.6.1+

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

Obrigado pelo comentário, .getnão funcionará, pois retorna um elemento DOM, não um jQuery. Lembre-se de que a .eqfunção também pode ser usada fora do seletor, se você preferir.

$('#selectBox option').eq(3).prop('selected', true);

Você também pode ser mais conciso / legível se quiser usar o valor , em vez de depender da seleção de um índice específico :

$("#selectBox").val("3");

Nota: .val(3) funciona bem para este exemplo, mas os valores não numéricos devem ser cadeias, por isso escolhi uma cadeia por consistência.
(por exemplo, <option value="hello">Number3</option>requer que você use .val("hello"))

Isso também pode ser útil, então pensei em adicioná-lo aqui.

Se você deseja selecionar um valor com base no valor do item e não no índice desse item, faça o seguinte:

Sua lista de seleção:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

O jquery:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

O item selecionado seria "Número 2" agora.

Tente isso:

$("#selectBox").val(3);

Ainda mais simples:

$('#selectBox option')[3].selected = true;

# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

quando você deseja selecionar as principais formas de seleção de conjuntos, pode usar
$('#select option').removeAttr('selected');para remover as seleções anteriores.

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();

O que é importante entender é que, val()para um selectelemento, retorna o valor da opção selecionada, mas não o número de elementos, como acontece selectedIndexno javascript.

Para selecionar a opção, value="7"você pode simplesmente usar:

$('#selectBox').val(7); //this will select the option with value 7.

Para desmarcar a opção, use uma matriz vazia:

$('#selectBox').val([]); //this is the best way to deselect the options

E é claro que você pode selecionar várias opções *:

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

* No entanto, para selecionar várias opções, seu <select>elemento deve ter um MULTIPLEatributo, caso contrário, não funcionará.

Sempre tive problemas com prop ('selected'), o seguinte sempre funcionou para mim:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');

Tente o seguinte:

$('select#mySelect').prop('selectedIndex', optionIndex);

Eventualmente, acione um evento .change:

$('select#mySelect').prop('selectedIndex', optionIndex).change();

Espero que isso possa ajudar também

$('#selectBox option[value="3"]').attr('selected', true);

selecione a terceira opção

$('#selectBox').val($('#selectBox option').eq(2).val());

Exemplo no jsfiddle

NB:

$('#selectBox option')[3].attr('selected', 'selected') 

está incorreto, a deferência da matriz fornece o objeto dom, não um objeto jquery, portanto falhará com um TypeError, por exemplo, no FF com: "$ ('# selectBox option') [3] .attr () não é uma função . "

Para esclarecer as respostas de Marc e John Kugelman, você pode usar:

$('#selectBox option').eq(3).attr('selected', 'selected')

get() não funcionará se usado da maneira especificada porque obtém o objeto DOM, não um objeto jQuery, portanto a solução a seguir não funcionará:

$('#selectBox option').get(3).attr('selected', 'selected')

eq()Obtém filtra o jQuery definido como o do elemento com o índice especificado. É mais claro que $($('#selectBox option').get(3)). Não é tão eficiente assim. $($('#selectBox option')[3])é mais eficiente (veja o caso de teste ).

Você realmente não precisa do objeto jQuery. Isto irá fazer o truque:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

Um outro ponto de vital importância:

O atributo "selecionado" não é como você especifica um botão de opção selecionado (pelo menos no Firefox e Chrome). Use o atributo "marcado":

$('#selectBox option')[3].checked = true;

O mesmo vale para as caixas de seleção.

Na 1.4.4, você obtém um erro: $ ("# selectBox option") [3] .attr não é uma função

Isso funciona: $('#name option:eq(idx)').attr('selected', true);

Onde #nameestá o ID de seleção e idxé o valor da opção que você deseja selecionar.

O atributo javascript puro selectedIndex é o caminho certo, pois é javascript puro e funciona em vários navegadores:

$('#selectBox')[0].selectedIndex=4;

Aqui está uma demonstração do jsfiddle com duas listas suspensas, usando uma para definir a outra:

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

Você também pode chamar isso antes de alterar o selectedIndex se o que você deseja é o atributo "selected" na tag de opção ( aqui está o violino ):

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');

//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

Costumo usar trigger ('change') para fazê-lo funcionar

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

Exemplo com id select = selectA1 e position_index = 0 (primeira opção em select):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

$('#selectBox option').get(3).attr('selected', 'selected')

Ao usar o acima, eu continuava recebendo erros no webkit (Chrome) dizendo:

"TypeError não capturado: o objeto # não possui o método 'attr'"

Essa sintaxe interrompe esses erros.

$($('#selectBox  option').get(3)).attr('selected', 'selected');

Selecione o item com base no valor na lista de seleção (especialmente se os valores da opção tiverem um espaço ou um caractere estranho) simplesmente fazendo o seguinte:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

Além disso, se você tiver um menu suspenso (em oposição a uma seleção múltipla), poderá fazer um break;para não fazer com que o primeiro valor encontrado seja substituído.

Eu preciso de uma solução que não tenha valores codificados no arquivo js; usando selectedIndex. A maioria das soluções fornecidas falhou em um navegador. Isso parece funcionar no FF10 e IE8 (alguém pode testar em outras versões)

$("#selectBox").get(0).selectedIndex = 1; 

Se você quiser apenas selecionar um item com base em uma propriedade específica de um item, a opção jQuery do tipo [prop = val] obterá esse item. Agora não me importo com o índice, apenas queria o item por seu valor.

$('#mySelect options[value=3]).attr('selected', 'selected');

Eu enfrentei o mesmo problema. Primeiro você precisa passar pelos eventos (ou seja, qual evento está acontecendo primeiro).

Por exemplo:

O primeiro evento está gerando caixa de seleção com opções.

O segundo evento está selecionando a opção padrão usando qualquer função como val () etc.

Você deve garantir que o segundo evento ocorra após o primeiro evento .

Para conseguir isso, use duas funções, digamos generateSelectbox () (para gerar caixa de seleção) e selectDefaultOption ()

Você precisa garantir que selectDefaultOption () seja chamado somente após a execução de generateSelectbox ()

Você também pode iniciar vários valores se sua caixa de seleção for uma multiplicação:

$('#selectBox').val(['A', 'B', 'C']);

você pode definir o valor da variável de opção de seleção dinamicamente e a opção será selecionada. Você pode tentar seguir o código

código:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

CÓDIGO HTML:

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

Em breve:

$("#selectBox").attr("selectedIndex",index)

onde índice é o índice selecionado como número inteiro.