JQuery - como selecionar o item suspenso com base no valor

86

Desejo definir um menu suspenso (selecionar) para ser alterado com base no valor das entradas.

eu tenho

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

E eu sei que quero alterar o menu suspenso para que a opção com o valor "fg" seja selecionada. Como posso fazer isso com JQuery?

javascript  jquery  select  jquery-selectors 
— Mark W
fonte
Eu pensei que era simples assim, mas não parecia funcionar. Acho que é hora de depurar.
— Mark W
1
— Christopher
1
Seu título é um pouco enganador. Você não está selecionando uma lista suspensa, está selecionando uma opção em uma lista suspensa ... é por isso que há 7 respostas que não me ajudam em nada ...
— user1566694
@ user1566694 Se você deseja obter informações técnicas, não é realmente chamado de lista suspensa, é uma "seleção"
— Mark W

Respostas:

155

Você deveria usar

$('#dropdownid').val('selectedvalue');

Aqui está um exemplo:

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>
Expandir snippet

— Jeaf Gilbert
fonte
21
Acordado acima. De acordo com seu código, seria$('#mySelect option[value="fg"]').attr('selected', true)
— Martavis P.
Meu erro. Eu vi não funcionar em alguns casos, mas claramente funciona no violino.
— Martavis P.
2
Eu apenas teria cuidado com isso. Ele não dispara o evento 'alterar' na tag <select>. Se você não estiver usando esse evento, tudo bem.
— Chad Fisher de
2
@ChadFisher Se você estiver usando o evento de alteração, acione-o com$('#dropdownid').val('selectedvalue').trigger('change');
— Liam
De fato, a mudança de gatilho ajuda quando você escreve algum código de acompanhamento para executar certas ações como atualização de modelo, até mesmo as atualizações de modelo de exibição ASP.net também acontecem no evento de mudança do DD. +1
— Div Tiwari
23 
$('#yourdropddownid').val('fg');

Opcionalmente,

$('select>option:eq(3)').attr('selected', true);

onde 3está o índice da opção que você deseja.

Demonstração ao vivo

— xbonez
fonte
8

Você pode usar este código jQuery que acho mais fácil de usar:

$('#your_id [value=3]').attr('selected', 'true');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>
Expandir snippet

— Céu
fonte
7 
 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");
— Abdo-Host
fonte
1
ou $ ('# mySelect'). val ('ab'). trigger ("alterar") ;; no caso de você estar usando o plugin select2.
— Vaibhav Jain de
1
.change () me ajudou a atualizar meu atributo de modelo ASP.net MVC. Obrigado pela resposta.
— Div Tiwari
Obrigado ... .trigger ('change') Funciona perfeitamente!
— LUISAO
5

Você pode simplesmente usar: 

$('#select_id').val('fg')
— Dagang
fonte
2

Pode ser tarde demais para responder, mas pelo menos alguém obterá ajuda.

Você pode tentar duas opções:

Este é o resultado quando você deseja atribuir com base no valor do índice, onde '0' é o índice.

 $('#mySelect').prop('selectedIndex', 0);

não use 'attr', pois ele está obsoleto com o jquery mais recente.

Quando você deseja selecionar com base no valor da opção, escolha isto:

 $('#mySelect').val('fg');

onde 'fg' é o valor da opção

— Manjuboyz
fonte
A seleção baseada em índice raramente é usada, no entanto, é uma boa opção devido ao cenário em que você escreveu algum código genérico para definir os menus suspensos e os valores variam com DDs diferentes. Obrigado :).
— Div Tiwari
1 

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>
Expandir snippet

— Siddhartha
fonte
1

Este código funcionou para mim:

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

Com esta lista de seleção de HTML:

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>
— Nole
fonte
0

Eu tenho uma situação diferente, onde os valores da lista suspensa já estão codificados. Existem apenas 12 distritos, portanto o controle de UI do jQuery Autocomplete não é preenchido por código.

A solução é muito mais fácil. Porque eu tive que percorrer outros postos onde presumia-se que o controle estava sendo carregado dinamicamente, não encontrando o que eu precisava e então finalmente descobri.

Então, onde você tem HTML como abaixo, a configuração do índice selecionado é definida assim, observe a parte -input, que é além do id suspenso: 

$('#project-locationSearch-dist-input').val('1');

                <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
                <select id="project-locationSearch-dist" data-tabindex="1">
                    <option id="optDistrictOne" value="01">1</option>
                    <option id="optDistrictTwo" value="02">2</option>
                    <option id="optDistrictThree" value="03">3</option>
                    <option id="optDistrictFour" value="04">4</option>
                    <option id="optDistrictFive" value="05">5</option>
                    <option id="optDistrictSix" value="06">6</option>
                    <option id="optDistrictSeven" value="07">7</option>
                    <option id="optDistrictEight" value="08">8</option>
                    <option id="optDistrictNine" value="09">9</option>
                    <option id="optDistrictTen" value="10">10</option>
                    <option id="optDistrictEleven" value="11">11</option>
                    <option id="optDistrictTwelve" value="12">12</option>
                </select>

Outra coisa que descobrimos sobre o controle Autocomplete é como desabilitá-lo / esvaziá-lo adequadamente. Temos 3 controles trabalhando juntos, 2 deles mutuamente exclusivos:

//SPN
spnDDL.combobox({
    select: function (event, ui) {
        var spnVal = spnDDL.val();
        //fire search event
        $('#project-locationSearch-pid-input').val('');
        $('#project-locationSearch-pid-input').prop('disabled', true);
        pidDDL.empty(); //empty the pid list
    }
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();

//PID
pidDDL.combobox({
    select: function (event, ui) {
        var pidVal = pidDDL.val();
        //fire search event
        $('#project-locationSearch-spn-input').val('');
        $('#project-locationSearch-spn-input').prop('disabled', true);
        spnDDL.empty(); //empty the spn list
    }
});

Parte disso está além do escopo do post e não sei onde colocá-lo exatamente. Como isso é muito útil e demorou um pouco para ser descoberto, está sendo compartilhado.

E também ... para habilitar um controle como este, é (desabilitado, falso) e NÃO (habilitado, verdadeiro) - isso também demorou um pouco para descobrir. :)

A única outra coisa a se observar, além da postagem, é:

    /*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked.  Thus, it's created at that point in time
and its value must be picked fresh.  Can't be put into a var and re-used
like the drop down list part of the UI control.  So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL);  But you can't
do this with the input part of the control.  Winded explanation, yes.  That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :) 
*/
    //district
    $('#project-locationSearch-dist').combobox({
        select: function (event, ui) {
            //enable spn and pid drop downs
            $('#project-locationSearch-pid-input').prop('disabled', false);
            $('#project-locationSearch-spn-input').prop('disabled', false);
            //clear them of old values
            pidDDL.empty();
            spnDDL.empty();
            //get new values
            GetSPNsByDistrict(districtDDL.val());
            GetPIDsByDistrict(districtDDL.val());
        }
    });

Todos compartilhados porque demorava muito para aprender essas coisas na hora. Espero que isso seja útil.

— user1585204
fonte
Você saiu do assunto aqui. A questão é uma simples mudança de seleção com base em seu valor com JQuery. Não há elementos de IU envolvidos.
— Mark W
0

Você pode selecionar o valor da opção suspensa por nome 

// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }

});
— Hardik
fonte
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.