Defina a opção de seleção 'selecionada', por valor


951

Eu tenho um selectcampo com algumas opções nele. Agora eu preciso selecionar um daqueles optionscom jQuery. Mas como posso fazer isso quando sei apenas valueo optionque deve ser selecionado?

Eu tenho o seguinte HTML:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

Eu preciso selecionar a opção com valor val2. Como isso pode ser feito?

Aqui está uma página de demonstração: http://jsfiddle.net/9Stxb/


Para Valor Único de Dropdown, use .val ('5') para Seleção Múltipla use val (['5', '4', '8']) demo completa freakyjolly.com/…
Code Spy

Respostas:


1534

Existe uma maneira mais fácil que não exige que você entre na tag de opções:

$("div.id_100 select").val("val2");

Confira o método this jQuery .


18
Isso pode causar erros no FF (pelo menos) que ocorre na caixa de seleção vazia
Jonathan

21
o pôster da pergunta começa com: "Eu tenho um campo de seleção com algumas opções ..." para que não fique vazio, portanto a solução permanece correta.
pinghsien422

8
@JamesCazzetta enviar uma matriz para val: .val(["Multiple2", "Multiple3"]). api.jquery.com/val/#val-value
scipilot

133
Eu tive que ligar manualmente .val(x).change();para acionar o evento onChange do select, parece que a configuração de val () não o aciona.
Scipilot

16
Cuidado: val () pode definir valores que não existem nas opções.
Daniel

429

Para selecionar uma opção com o valor 'val2':

$('.id_100 option[value=val2]').attr('selected','selected');

5
Essa é a melhor solução se o valor desejado pode ou não ser uma opção e você não deseja fazer alterações se não for uma opção. Se você usar .val()o select e tentar escolher um valor que não esteja lá, desmarcará tudo.
Wally Altman

Concordo - esta é a opção mais elegante - clara e objetiva. Não tenho certeza se "prop" funciona melhor em todos os casos (navegadores). Mas isso certamente faz a pesquisa fácil para você.
Lee Fuller

4
Além disso, eu usei o $("select[name=foo] option[value=bar]).attr('selected','selected');que também funcionou bem para todos os navegadores que testei.
Lee Fuller

1
Gosto mais desta resposta do que da resposta aceita, porque: element.outerHTML é atualizado com isso, enquanto que não com a resposta aceita.
HoldOffHunger

2
Vale a pena notar que isso não funcionará se o menu suspenso de seleção estiver oculto, então, no meu caso, estou usando o plug-in boxit select, mas tentando acionar a alteração da caixa de seleção, para que o código original com o manipulador onchange para o dropdown ainda seja executado. Só tenho que código de atualização para novo elemento que é elemento selectboxit
chris c

331

Use o change()evento após selecionar o valor. Dos documentos:

Se o campo perder o foco sem que o conteúdo seja alterado, o evento não será acionado. Para acionar o evento manualmente, aplique .change()sem argumentos:

$("#select_id").val("val2").change();

Mais informações estão em .change () .


22
Isso merece muito mais votos e pertence ao topo. É a maneira correta, sem mexer com prop, attretc. , e progride todos os eventos corretamente.
precisa

1
Sim, isso propaga todos os eventos corretamente. Nos meus testes, "attr" funcionou pela primeira vez e tudo ficou "selecionado". Eu usei "prop", que mudou tudo corretamente, mas não propagou eventos como (mostrar / ocultar) outros campos. Essa resposta funcionou em todos os casos e deve ser considerada correta.
illin

1
Se você já tem um ouvinte vinculado à alteração, isso causará um loop infinito.
Qwertzman # 9/17

1
Lutou um pouco para tentar mudar meu valor tolo da lista suspensa, essa solução foi a única que funcionou! Obrigado parceiro!
AxleWack 2/10/19

1
Obrigado. Pesquisei bastante antes de encontrar essa sugestão, e essa foi a única coisa que funcionou. Não sei por que não está no topo.
Rob Santoro

58

Desmarque tudo primeiro e filtre as opções selecionáveis:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

2
O valor do atributo selecionado pode ser uma sequência vazia ou selected. Você quis dizer .prop()?
usar o seguinte código

2
Boa resposta. A resposta aceita termina com a seleção vazia, quando o valor não existe nas opções.
Rauli Rajande

5
AO TOPO, melhor aqui. Para uso futuro, acho que devemos usar prop em vez de attr.
Daniel

Eu gosto muito desta solução. Estou pensando que se seria melhor, desempenho sábio, se o seletor foi mudado para ".id_100> opção"
Colina

43
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

Definindo o status pendente por valor

   $('#contribution_status_id').val("2");

36

Para mim, o seguinte fez o trabalho

$("div.id_100").val("val2").change();

27

Eu acho que a maneira mais fácil é selecionar definir val (), mas você pode verificar o seguinte. Consulte Como lidar com as tags de seleção e opção no jQuery? para mais detalhes sobre as opções.

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

Não otimizado, mas a lógica a seguir também é útil em alguns casos.

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

Eu prefiro esse método do que definir diretamente val (). Também gosto de definir o atributo - ajuda na depuração. $ (this) .attr ("selected", "selected")
Craig Jacobs

17

Você pode selecionar qualquer atributo e seu valor usando o seletor de atributos [attributename=optionalvalue]; portanto, no seu caso, você pode selecionar a opção e definir o atributo selecionado.

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

Onde valueestá o valor que você deseja selecionar.

Se você precisar remover quaisquer valores selecionados anteriores, como seria o caso, se for usado várias vezes, será necessário alterá-lo um pouco para remover primeiro o atributo selecionado.

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);

15

A melhor maneira é assim:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

No chrome, a configuração $('<select>').val('asdf')não atualizou o select para mostrar a opção atualmente selecionada. Esta resposta resolveu esse problema.
Joshua Burns

Embora isso funcione também, mas $ ('<select>') .val ('asdf') está funcionando bem no chrome 79.0.3945.88
QMaster

14

uma resposta simples é, em html

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

no jquery, chame a função abaixo por botão ou o que for

$('#idUkuran').val(11).change();

simples e 100% funciona, porque foi retirado do meu trabalho ... :) espero que ajude ..


Seu valor padrão é 1000? Por que não ""
voodoocode 6/02

2
é um opcional, você pode modificar como você precisa .. :)
Mang Jojot

14

Não há razão para pensar demais, tudo o que você está fazendo é acessar e definir uma propriedade. É isso aí.

Ok, então um dom básico: se você estivesse fazendo isso em JavaScript direto, faria o seguinte:

window.document.getElementById('my_stuff').selectedIndex = 4;

Mas você não está fazendo isso com JavaScript direto, mas com jQuery. E no jQuery, você deseja usar a função .prop () para definir uma propriedade, para fazer assim:

$("#my_stuff").prop('selectedIndex', 4);

De qualquer forma, verifique se seu ID é único. Caso contrário, você estará batendo a cabeça na parede, perguntando-se por que isso não funcionou.


12

A maneira mais fácil de fazer isso é:

HTML

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

Saída: Isso ativará ENT .


12

É melhor usar change()depois de definir o valor selecionado.

$("div.id_100 select").val("val2").change();

Ao fazer isso, o código quase mudará a seleção por usuário, a explicação está incluída no JS Fiddle :

JS Fiddle


Por que é isso? Você poderia explicar um pouco?
71

JS Fiddle . Com um método change (), o código estará próximo de alterar a seleção pelo usuário, enquanto houver ouvintes em mudança necessários para serem manipulados.
Nick Tsai

12

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

Isso funciona bem onde #graphtypeestá o ID da tag select.

exemplo, selecione tag:

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>

8
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");

8

Usar:

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

Isso funciona para mim. Estou usando esse código para analisar um valor em um formulário de atualização do fancybox, e minha fonte completa de app.js é:

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

E meu código PHP é:

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}

7

.attr () às vezes não funciona em versões mais antigas do jQuery, mas você pode usar .prop () :

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});

4

Isso funciona com certeza para o Select Control :

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });


4

Link de origem insira a descrição da imagem aqui

Use o método jQuery val () para seleção de valor único e múltiplo no DropDown

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

HTML

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>

3

Tente isso. Simples, mas eficaz, javaScript + jQuery, a combinação letal.

SelectComponent:

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

Seleção:

document.getElementById("YourSelectComponentID").value = 4;

Agora sua opção 4 será selecionada. Você pode fazer isso para selecionar os valores no início por padrão.

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

ou crie uma função simples, coloque a linha nela e chame a função em anyEvent para selecionar a opção

Uma mistura de jQuery + javaScript faz a mágica ....


3

É um post antigo, mas aqui está uma função simples que funciona como o plugin jQuery.

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

Você simplesmente pode fazer algo assim:

$('.id_100').selectOption('val2');

A razão pela qual usar isso é porque você altera o satemant selecionado para o DOM, o que é compatível com o navegador cruzado e também acionará a alteração para que você possa capturá-lo.

É basicamente simulação de ação humana.


2
  • Você deve ter em mente que o valor que deseja alterar dinamicamente deve ser o mesmo que um presente nas opções definidas em seu HTML case sensative. Você pode alterar sua caixa de seleção dinamicamente da seguinte maneira:

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work


1

Parece haver um problema com os controles suspensos selecionados que não mudam dinamicamente quando os controles são criados dinamicamente, em vez de estarem em uma página HTML estática.

No jQuery, esta solução funcionou para mim.

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

Assim como um adendo, a primeira linha de código sem a segunda linha funcionou de maneira transparente, recuperar o índice selecionado estava correto após a definição do índice e, se você realmente clicou no controle, ele mostraria o item correto, mas isso não refletia no rótulo superior do controle.

Espero que isto ajude.


0

Um problema ocorreu quando o valor é um ID e o texto é um código. Você não pode definir o valor usando o código, mas não tem acesso direto ao ID.

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here


-1

Isso funciona bem

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });
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.