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

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/

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 .

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

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

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

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

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

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

Para mim, o seguinte fez o trabalho

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

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

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

A melhor maneira é assim:

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

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

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.

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 .

É 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

$('#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>

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

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

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

Isso funciona com certeza para o Select Control :

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

Basta colocar neste código:

$("#Controls_ID").val(value);

Link de origem

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>

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

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

• 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

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.

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

funciona para mim

$("#id_100").val("val2");

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